jquery - koGrid 清空我们的网格，而不是使用 Asp.Net MVC 3 使用 KnockoutJS 进行更新

Question

我们正在开发 ASP.Net MVC 3 + Knockout-2.1.0，我们正在尝试渲染 koGrid，但有一个 Ajax 问题(我们认为)是清空 koGrid 而不是更新它。

在初始状态下，koGrid的数据源是一个两行的数组，这是ViewModel(vm):

var viewModel = function() {
    var self = this;
    self.radioSelectedOptionValue = ko.observable('-1');
    self.AvailableActiveProducts = ko.mapping.fromJS(availableActiveProductsObject);
};
ko.applyBindings(new viewModel());

AvailableActiveProducts 是网格的数据源。这是 HTML:

<div data-bind="koGrid: { data: AvailableActiveProducts }" />

网格最初渲染得很好:

问题从这里开始，当 radioSelectedOptionValue 改变时(它确实随着单选按钮控件的更改)，网格应该更新，但它是空的。

我们希望单选按钮能够通过 knockout 订阅函数调用来更新/更改:

self.radioSelectedOptionValue.subscribe(function() {
    $.get('/SalesOrderManagement/GetProductsBySelection', { 
        typeCriteria: "g", id: 1, seasonType: "1" }, function(data) {
            self.AvailableActiveProducts(data.AvailableActiveProducts);
        });
    }, this);

在 Controller 中，响应这个Ajax调用的方法是:

public JsonResult GetProductsBySelection(string typeCriteria, long id, string seasonType)
{
    var model = _orchestrator.GetProductsByUserCriteria(typeCriteria, id, seasonType);
    return Json(model, JsonRequestBehavior.AllowGet);
}

使用 fiddler 进行调试，json 对象返回(我们期望有 3 行)，但调用后网格变为空。

我们的假设是如何将数据设置到 observableArray 是问题的一部分。我们怎样才能让这个更新正常渲染/工作？

我们认为我们已经找到了遇到同样问题的其他人，但 KO 列表上没有任何回复:https://groups.google.com/forum/?fromgroups#!topic/knockoutjs/BS4ugQfV14g

这是一个表现出相同行为的 jsFiddle:http://jsfiddle.net/wabe/H4ZXM/7/

更新:已解决!

在 Tyrsius 发表评论后，我们注意到网格会在多次点击后刷新。

因此，添加弹出和推送来强制刷新(根据@Keith)使其一切正常，网格以预期方式更新。所以 javascript 更改为:

    self.radioSelectedOptionValue.subscribe(function() {
        $.get('/SalesOrderManagement/GetProductsBySelection', { typeCriteria: "gender", id: 1, seasonType: "inseason" }, function(data) {
            self.AvailableActiveProducts(data);
            self.AvailableActiveProducts.push({});
            self.AvailableActiveProducts.pop();
        });

    }, this);

push和pop使得最终的update/koGrid刷新。这是基思的 fiddle : http://jsfiddle.net/keith_nicholas/MYYNw/

Answer 1

看起来它没有正确更新，如果您单击顶部的列进行排序，则会出现数据......

如果我推送并弹出一个虚拟项目，代码“看起来”会按照您的预期工作

http://jsfiddle.net/keith_nicholas/MYYNw/

注意，我去掉了映射，因为您没有映射初始数据，要么映射两者，要么都不映射(取决于您是否想观察实际数据元素的变化)