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

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;
});

这样，在您的 updateRestaurantsList 方法完成之前，不会调用填充您的 mappedRests2 变量。

编辑 1

确保永远不要使用等号为 observable 赋值。

// 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);
    });

  };
};

Answer 2

我尝试过像这样等待 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

一旦你像这样声明了你的 observable：

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

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

self.restaurants = mappedRests2;

相反，您需要这样做：

self.restaurants(mappedRests2);