1

上下文
我目前正在探索结合 KoGrid 的 KnockoutJS。
我有一个包含多个字段（也绑定到字段）的对象，以及我想在 KoGrid 中显示的子对象列表。

jsfiddle
我准备了一个 jsFiddle 来说明我遇到的问题：http:
//jsfiddle.net/kPmAJ/4/

问题：
我的视图模型包含一个可观察的 foo，其中包含父对象。
在这个父对象中，有一个属性children，它是一个observableArray包含对象

KoGrid 必将$root.foo().children

如果在初始化绑定之前填充了数组，则此方法有效。
但是，该对象之后被替换（数据通过 AJAX 加载并且可以重新加载），并且显然KoGrid 项目绑定丢失了。

我在想，由于我的 viewmodel 上的foo -object 是一个observable，如果 foo 被替换，这将触发 KoGrid 正在观察里面的数组进行更新。这确实适用于 foreach 绑定。

显然 KoGrid 并没有触发。

--

我在这里做错了什么，还是我在 KoGrid 中遇到了问题？

代码（仅供参考。见提琴手;））

var SampleObject = function (data) {
    this.id = new ko.observable(data ? data.id : null);
    this.children = new ko.observableArray([]);

    if(data) {
        var childrenMapped = [];
        $(data.children).each(
            function()  {
                childrenMapped.push(new SampleChildObject(this));
            }
        );
        this.children(childrenMapped);
    }
}

var SampleChildObject = function (data) {
    this.name = new ko.observable(data ? data.name : null);
};


var vm = {
    foo: new ko.observable('John Doe'),
    bar: new ko.observable(
            new SampleObject(
            {
                id: 1234,
                children: []
            })
        )
};

ko.applyBindings(vm);

// Returns from an AJAX-call instead, so can't be before applyBindings
vm.bar(new SampleObject(
            {
                id: 1234,
                children: [
                    { name: 'test1' },
                    { name: 'test2' },
                    { name: 'test3' }]
            }));

-

<div style="height: 500px;"
data-bind="koGrid: { data: bar().children }"></div>

<ul data-bind="foreach: bar().children">
    <li data-bind="text: name"></li>
</ul>

谢谢！

4

1 回答 1

2

发生的事情是 koGrid 绑定没有更新处理程序，因此它没有响应 bar 中的任何更改。

koGrid 确实会观察可观察的数组 children，但如果我们要将 bar().children 中的值替换为从 Ajax 调用返回的值，则网格会更新。

像这样：

function (data) {

    var childrenMapped = [];

    $(data.children).each(

        function()  {

            childrenMapped.push(new SampleChildObject(this));

});
    bar().children(childrenMapped);

    bar().id(data.id);

});

您还应该检查应该解决此问题的映射插件。 ko映射

于 2013-05-18T13:13:01.073 回答