ObservableArray 绑定不会更新

Question

编辑： JSFiddle with comments

我正在使用 knockoutjs 开发我的第一个 SPA。我的情况是：

• 我有一个正在显示的项目列表，用户可以从中选择一个项目
• 选择项目后，用户可以对所选项目进行更改
• 确认更改后，SPA 将更新的数据发送到 web api
• 但是，显示我所有条目的列表并未反映对项目所做的更新

我创建了一个简单的 fiddle.js (see here)。它比 1000 字更能说明我的问题。为简单起见，我省略了分页逻辑，但由于各种原因，我的列表的 observable 需要计算。

查看模式。

var ViewModel = function() {

    var self = this;
    self.selectedItem = ko.observable();

    self.items = ko.observableArray([
    {
        name: "Item A",
        price: "12.99"
    },
    {
        name: "Item B",
        price: "13.99"
    },
    {
        name: "Item C",
        price: "90.99"
    }]);

    self.paginated = ko.computed(function() {
        // This is where I do some pagination and filtering to the content
        // It's left out here for simplicity. The binding for the list needs
        // to be a computed though.
        return self.items();
    });

    self.selectItem = function(item) {
        self.selectedItem(item);
    };

    self.save = function(item) {
        // Sending data to web api...

        // After the saving, the displaying list does not update to reflect the changes
        // I have made. However, switching entries and checking the changed item shows
        // that my changes have been saved and are stored in the observable.
    }

};

ko.applyBindings(new ViewModel());

查看

<!-- ko foreach: paginated -->
<a href="#" data-bind="text: name, click: $parent.selectItem"></a><br />
<!-- /ko -->
<br />
<br />
<div data-bind="visible: selectedItem">
    <!-- ko with: selectedItem -->
    <form>
        <input type="text" data-bind="value: name" />
        <input type="text" data-bind="value: price" />
        <br />
        <button type="button" data-bind="click: $parent.save">Save</button>
    </form>
    <!-- /ko -->
</div>

希望你能帮帮我，为了性能和速度，我不想从服务器重新加载所有数据。

Answer 1

您必须使数组中对象的属性成为可观察的属性，以反映对 UI 的更改。

self.items = ko.observableArray([
{
    name: ko.observable("Item A"),
    price: ko.observable("12.99")
},
{
    name: ko.observable("Item B"),
    price: ko.observable("13.99")
},
{
    name: ko.observable("Item C"),
    price: ko.observable("90.99")
}]);