观察在敲除中观察到的阵列的属性

Question

我正在处理ASP.NET MVC应用程序。我的操作是返回一个视图，该视图是一个模型，该模型是一个对象数组（具有属性，ID，ISViewable之类的属性）。

var model = @Model.ToJson(); // done via extension call

我想观察此数组，因此每当它更改时，我都可以更新已绑定到模板的表。

var viewModel = {
    accounts = ko.observableArray(model)
}

这可以很好地添加和删除数组中的元素。但是，我还希望模板在一个帐户中的一个属性更改（即，名称或ID）时进行更新。

在敲除网站上，它说： 当然，如果您愿意，您可以观察到这些属性，但这是一个独立的选择. 。这就是我不知道该怎么做的事情。

我尝试了这样的事情而无济于事：

var viewModel = {
    accounts = ko.oservableArray([])
}

for(var i = 0; i < model.length; i++) {
    ko.observableArray(model[i]);
    viewModel.accounts.push(model[i]);
}

如果需要，我可以发布模板和表格。

Answer 1

你应该研究 敲除图 插入。我认为它可以完成您想要做的一切。

Answer 2

我最终使它工作了，所以我想我会与可能遇到同样问题的任何人分享。

您需要将数组项目包装在JavaScript类中。然后在构造函数中，将每个属性设置为可观察的：

var model = @Model.ToJson();

var viewModel = {
    accounts = ko.observableArray(ko.utils.arrayMap(model, function(account) {
        return new AccountWrapper(account);
    }))
};

function AccountWrapper(account) {
    this.Property1 = ko.observable(account.Propery1);
    this.Property2 = ko.observable(account.Propery2);
    this.Property3 = ko.observable(account.Propery3);
}

ko.applyBindings(viewModel);

而且，如果您想直接修改其中一个项目以查看更改，则可以做类似的事情：

viewModel.accounts()[3].Name('My Name Changed');

当添加或删除项目时，您仍然可以通知：

viewModel.accounts.remove(viewModel.accounts()[4]);

Answer 3

这是另一种有效的方法，不需要映射插件：

var model = @Model.ToJson();

var viewModel = {
    accounts: ko.observableArray([]),

    fromJS: function(js) {
        for (var i = 0; i < js.length; i++) {
            this.accounts.push({ 
                Property1: ko.observable(js[i].Property1),
                Property2: ko.observable(js[i].Property2),
                Property3: ko.observable(js[i].Property3)
            });
        }
    }
};

viewModel.fromJS(model);
ko.applyBindings(viewModel);