observableArray中的可观察对象不会自动更新

Question

我一直在寻找动态数据绑定的Knockout,我有一种情况,我需要一个可观察的数组来包含多个可观察对象.

这是我的代码:

<ul data-bind="foreach: { data: categories, as: 'category' }">
    <li>
        <ul data-bind="foreach: { data: items, as: 'item' }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-bind="text: item"></span>
                <input type="text" data-bind="value: item"/>
            </li>
        </ul>
    </li>
</ul>

$(document).ready(function () {
            ko.applyBindings(viewModel);
        });

        var viewModel = {
            categories: ko.observableArray([
                { name: 'Fruit', items: [ko.observable('Apple'), ko.observable('Orange'), ko.observable('Banana')] },
                { name: 'Vegetables', items: [ko.observable('Celery'), ko.observable('Corn'), ko.observable('Spinach')] }
            ])
        };

通常使用oject observable时,我可以修改输入文本框的值,并将该值设置为用于显示该属性的整个页面.

在我当前的例子中,我试图用我的输入框做同样的事情,但是在我修改了文本框中的值后,span没有达到curent值.

我如何使observableArray中的可观察对象表现得像它们是独立的可观察对象一样？

Answer 1

当我遇到这些问题时，我喜欢将它们分解为子虚拟机，这使我可以更好地控制我所处的每个上下文级别所发生的情况。对于上述问题，我会执行以下操作：

var produceVM = function (data) {
    var self = this;

    self.item = ko.observable(data);
}

var categoryVM = function (data) {
    var self = this;

    self.name = ko.observable(data.name);
    self.items = ko.observableArray();

    var items = ko.utils.arrayMap(data.items, function (item) {
        return new produceVM(item);
    });

    self.items(items);
}

var viewModel = function (data) {
    var self = this;

    self.categories = ko.observableArray();

    var categories = ko.utils.arrayMap(data, function (category) {
       return new categoryVM(category); 
    });

    self.categories(categories);
}

var data = [
    { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
    { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach' ]}
];

ko.applyBindings(new viewModel(data));

我相信 ko 映射插件可以实现与此类似的功能，而无需编写上述所有代码。您可以将数据模型传递给它，它会为每个项目构建可观察量。