Использование JQuery Ajax с knockout.js отображения плагина

Question

Я пытаюсь использовать функцию JQuery в $ .ajax с knockout.js отображения плагин, с помощью тест-апи здесь: http://rest.learncode.academy/

Данные возвращаются не в праве формат. Мой JS выглядит следующим образом:

function FromDb(){ 

      $.ajax({ 
       type: 'GET', 
       url: 'http://rest.learncode.academy/api/johnbob/friends', 
       //dataType: "json", 
       success: function(data) { 
       console.log("I have friends!", data[0]); //returns all of johnbob's friends 
       myResult = data[0]; 
      return myResult 
       } 
      }); 



//return{ name: 'test' } 

    } 


    function MaptoKo(frnd){ 
     var map = ko.mapping.fromJS(frnd); 
     return map; 
    } 

    var obj={ 
     friends:ko.observable(new MaptoKo(new FromDb())), 
    } 

    ko.applyBindings(obj.friends); 

Поскольку апи возвращает массив, и мне нужен только один объект, я использую данные [0], чтобы просто получить первый элемент в массиве. Когда я прокомментирую вызов ajax и раскомментирую // return {name: 'test'}, я получаю результат, который я хочу, я просто не уверен, почему он не работает с использованием вызова ajax.

Answer 1

Мне потребовалось несколько минут, чтобы вспомнить, как сделать это правильно, чтобы обновить привязки из функции обратного вызова успеха AJAX.

Проблема заключается в отключении между вызовом FromDb() и функцией AJAX success. Возврат значения из функции успеха происходит асинхронно, что означает, что код не знает, чтобы связать значение, возвращаемое обратно в вызов MaptoKo(new FromDb()). Когда вы делаете FromDb() звонок только return { name: 'test' };, это происходит синхронно, поэтому результат делает его в функции MaptoKo.

$.getJSON("/some/url", function(data) { 
    // Now use this data to update your view models, 
    // and Knockout will update your UI automatically 
}) 

Таким образом, все Нокаут нужно, чтобы помочь вам сделать это: ...

• Для загрузки, обновите модель представления, используя данные, которые вы получили, используя один из перечисленных выше методов

Источник: Knockout JSON Data Docs

Для вашего конкретного кода, это будет означать что-то вроде следующего:

function FriendsViewModel() { 
    var self = this; 
    self.friends = ko.observable(); 

    // Load the initial data 
    $.ajax({ 
     type: 'GET', 
     url: 'http://rest.learncode.academy/api/johnbob/friends', 
     //dataType: "json", 
     success: function(data) { 
      //returns all of johnbob's friends 
      console.log("I have friends!", data[0]); 
      myResult = data[0]; 
      // Don't return the result, bind it to the viewmodel 
      self.friends(myResult); 
      } 
     }); 
} 

ko.applyBindings(new FriendsViewModel()); 

Это хорошо освещена в Loading and Saving tutorial. Обратите внимание, что это больше не использует плагин отображения. Для того, чтобы связать, что, следуя совету mapping plugin docs:

Чтобы создать модель представления с помощью отображения плагина, заменить создание ViewModel в коде выше, с функцией ko.mapping.fromJS:

var viewModel = ko.mapping.fromJS(data); 

Этот автоматически создает видимые свойства для каждого из свойств данных. Затем, каждый раз, когда вы получаете новые данные с сервера, вы можете обновить все свойства на ViewModel в одном шаге от повторного вызова функции ko.mapping.fromJS:

// Every time data is received from the server: 
ko.mapping.fromJS(data, viewModel); 

$.(function(){ 

    // Load the initial data 
    $.ajax({ 
     type: 'GET', 
     url: 'http://rest.learncode.academy/api/johnbob/friends', 
     //dataType: "json", 
     success: function(data) { 
      //returns all of johnbob's friends 
      console.log("I have friends!", data[0]); 
      myResult = data[0]; 
      // Don't return the result, bind it to the viewmodel 
      var viewModel = ko.mapping.fromJS(myResult); 
      // Only bind once after the initial load. 
      // If you save or reload data, don't reapply bindings 
      ko.applyBindings(viewModel); 
      } 
     }); 
}); 

Это последний пример лишь предположение, Я никогда не использовал плагин отображения. Но, надеюсь, это иллюстрирует, что вы не можете просто вернуть результаты асинхронных обратных вызовов.