4

我们正在开发 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 }" />

网格最初渲染得很好：

IMG

问题从这里开始，当 radioSelectedOptionValue 发生变化时（它与单选按钮控件发生变化），网格应该更新，但它被清空。

IMG

我们希望单选按钮通过淘汰订阅函数调用来更新/更改：

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

在控制器中，响应这个 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 行），但调用后网格变为空。

IMG

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

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

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

更新：解决了！

在 Tyrsius 的评论之后，我们注意到网格会在几次单击后刷新。

因此，添加一个 pop 和 push 来强制刷新（每个@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 刷新。这是基思的小提琴：http: //jsfiddle.net/keith_nicholas/MYYNw/

4

2 回答 2

3

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

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

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

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

于 2012-07-02T22:54:52.280 回答
1

我有这个确切的问题，并通过在 ajax 调用中移动 viewModel 绑定来解决它。

老旧的：

            var API_URL = "/api/vendor/";

            window.viewModel = {
                items: ko.observableArray([]),
                item: ko.observableArray([])
            }

            ko.applyBindings(viewModel);

            function getVendors() {
                $.ajax({
                    type: 'GET',
                    url: API_URL,
                    dataType: 'json',
                    success: function (data) {
                        newData = ko.mapping.fromJS(data);
                        viewModel.items(newData);
                    }
                });
            };

            getVendors();

新热点：

           var API_URL = "/api/vendor/";
           $.ajax({
                type: 'GET',
                url: API_URL,
                dataType: 'json',
                success: function (data) {
                    window.viewModel = {
                        items: ko.mapping.fromJS(data),
                        item: ko.observableArray([])
                    }
                    ko.applyBindings(viewModel);
                }
            });
于 2012-11-19T17:33:38.560 回答