Knockout JS-使用AJAX调用更新viewModel

Question

还有一些类似的问题，但并没有帮助我解决问题。使用AJAX更新viewModel后，我无法在页面/视图上更新结果。如果我重新加载页面，我会得到有效的AJAX响应，它会更新视图，但当我单击btnAdvancedSearch 时不会

我有一个简单的HTML:

    <div>
        <input type="button" id="btnAdvancedSearch" data-bind="click: refresh" />
    </div>
    <div id="resultslist1" data-bind="template: { name: 'rest-template', foreach: restaurants }">
    </div>

我在文件加载时绑定：

$(document).ready(function () {
     ko.applyBindings(new RestaurantsListViewModel());
});

我的viewModel是这样的，在其中我调用与按钮绑定的刷新

// Overall viewmodel for this screen, along with initial state
function RestaurantsListViewModel() {
    var self = this;
    self.restaurants = ko.observableArray([]);
    var mappedRests = $.map($.parseJSON(sessionStorage.getItem('searchResults')), function (item) { return new Restaurant(item) });
    self.restaurants = mappedRests;
    self.refresh = function () {
    updateRestaurantsList(); //Method executes AJAX and saves result to session.
    var mappedRests2 = $.map($.parseJSON(sessionStorage.getItem('searchResults')), function (item) { return new Restaurant(item) });
    self.restaurants= mappedRests2;
}

}

我在这里错过了什么？

感谢

Answer 1

我试着等待AJAX像这样完成：

 // Overall viewmodel for this screen, along with initial state
 function RestaurantsListViewModel() {
     var self = this;
     self.restaurants = ko.observableArray([]);
     var mappedRests = $.map($.parseJSON(sessionStorage.getItem('searchResults')),     function (item) { return new Restaurant(item) });
      self.restaurants = mappedRests;
      self.refresh = function () {
    var latitude = sessionStorage.getItem('latitude');
    var longitude = sessionStorage.getItem('longitude');
    var query = '{"Accepts_Reservations":"' + $('#chkReservation').is(":checked") + '","Accepts_Cards":' + $('#chkAcceptsCards').is(":checked") + '"}';
    var searchResults = getRestaurantsAdvancedSearchAJAX(query, latitude, longitude, 40);
    searchResults.success(function (data) {
        var information = data.d;
        var mappedRests2 = $.map($.parseJSON(information), function (item) { return new Restaurant(item) });
        self.restaurants = mappedRests2;
    });
  };
};

编辑1

一旦你这样宣布你的可观察性：

self.restaurants = ko.observableArray([]);

当你想更新restaurants时，你不能这样做：

self.restaurants = mappedRests2;

相反，你需要这样做：

self.restaurants(mappedRests2);

Answer 2

updateRestaurantsList(); //Method executes AJAX and saves result to session.

上面一行后面的注释表示此方法正在进行异步调用。因此，它之后的行很可能在sessionStorage执行之前已经填充。也许可以考虑让updateRestaurantsList返回一个承诺。然后你可以更新你的代码如下：

updateRestaurantsList().then(function() {
    var mappedRests2 = $.map($.parseJSON(sessionStorage.getItem('searchResults')), function (item) { return new Restaurant(item) });
    self.restaurants= mappedRests2;
});

这样，填充mappedRests2变量的调用直到updateRestaurantsList方法完成后才会发生。

编辑1

请确保永远不要使用等号为可观测值赋值。

// Overall viewmodel for this screen, along with initial state
 function RestaurantsListViewModel() {
     var self = this;
     self.restaurants = ko.observableArray([]);
     var mappedRests = $.map($.parseJSON(sessionStorage.getItem('searchResults')),     function (item) { return new Restaurant(item) });
      self.restaurants(mappedRests);
      self.refresh = function () {
    var latitude = sessionStorage.getItem('latitude');
    var longitude = sessionStorage.getItem('longitude');
    var query = '{"Accepts_Reservations":"' + $('#chkReservation').is(":checked") + '","Accepts_Cards":' + $('#chkAcceptsCards').is(":checked") + '"}';
    var searchResults = getRestaurantsAdvancedSearchAJAX(query, latitude, longitude, 40);
    searchResults.success(function (data) {
        var information = data.d;
        var mappedRests2 = $.map($.parseJSON(information), function (item) { return new Restaurant(item) });
        self.restaurants(mappedRests2);
    });
  };
};