0

我正在尝试在嵌套元素中动态添加数据，问题是我想将从服务器返回的每个对象转换为可观察数组。

function viewModel() {
    this.projects = ko.observableArray();
    this.addMember = function addMember() {
        var match = ko.utils.arrayFirst(this.projects(), function (item) {
           // return the first item in the array just for simulation
           return true; 
        });
        if (match) {
            var newItem = {
                name: 'member 5'  
            };
            match.members.push(newItem);
        }
    };
}

var vm = new viewModel();
// manually declare observable
vm.projects.push({
    name: ko.observable('project a'),
    members: ko.observableArray([
        { name: 'member 1' },
        { name: 'member 2' }
        ])
});

vm.projects.push({
    name: ko.observable('project b'),
    members: ko.observableArray([
        { name: 'member 3' },
        { name: 'member 4' }
        ])
});

ko.applyBindings(vm);

这就是我现在得到的：

http://jsfiddle.net/RyWr6/

在此示例中，我想将 ko.mapping 用于“将所有设置对象作为数组的列表”而不将每个对象创建为 observablearray

4

1 回答 1

0

如果您不想为 members 属性创建 observableArray。唯一的解决方案是手动更改 project2 属性。由于在 project2 上调用 valueHasMutated 函数不起作用，我将通过这样做来强制刷新视图：

this.addMember2 = function addMember() {
    var match1 = ko.utils.arrayFirst(this.projects2(), function (item) {
       // return the first item in the array just for simulation
       return true; 
    });
    if (match1) {
        var newItem = {
            name: 'member 5'  
        };
        match1.members.push(newItem);
    }
    // trick
    var p2 = this.projects2();
    this.projects2([]);
    this.projects2(p2);
};

我知道这不是一个合适的解决方案，但我找不到更好的解决方案。

对问题的回应：

projects2 属性不包含 observables 元素。这意味着如果嵌套元素（如成员）发生变化，ko引擎将不会收到通知。

为了强制刷新视图，我更改了 projects2 属性。通过这样做，将通知 ko 引擎在此属性中发生了某些更改并刷新视图。

  • p2 = this.projects2() ：将 observableArray() 转换为常规数组
  • this.projects2([]) ：这将导致视图刷新
  • this.projects2(p2) ：这添加了我在上一行删除的项目并导致视图刷新

我希望它有所帮助。

于 2013-06-06T08:51:09.740 回答