在编辑时更新observableArray项

Question

jsFiddle例子

---

我有一个observableArray可选项(在表中).我要做的是点击表格行打开一个模态,用项目详细信息填充模态,允许编辑项目然后保存更改 - 反映更新的项目observableArray.到目前为止,我已经完成了其他所有工作,但似乎无法更新数组项.

到目前为止,我已经尝试过:

• 结交每一个项目observableArray的observable
• .replace在数组上使用来更新项目 - 这确实有效,但它只是感觉不对
• 回发更新的项目,将其应用于数据库并重新绑定数组 - 虽然这有效,但是这不会破坏KnockoutJS的观点吗？

我在上面提供了一个jsFiddle链接,演示了我想要实现的目标.

查看模型和初始化

随意就我如何初始化任何建议,self.selectItem我目前在KnockoutJS的学习阶段,并通过与模拟项目玩弄这样做,所以我向所有人开放的建设性的批评.

var items = [{
    Id: 1,
    Text: 'First item'
}, {
    Id: 2,
    Text: 'Second item'
}];

var viewModel = function (items) {
    var self = this;
    self.items = ko.observableArray(items);
    self.selectedItemId = ko.observable();
    self.item = ko.observable();
    self.selectItem = function (item) {
        for (var i = 0; i < self.items().length; i++) {
            if (self.items()[i].Id === self.selectedItemId()) {
                self.item(self.items()[i]);
                break;
            }
        }
    };
};

ko.applyBindings(new viewModel(items));

标记绑定

<select data-bind="options: items, optionsCaption: 'Select...', optionsText: 'Text', optionsValue: 'Id', value: selectedItemId, event: { change: selectItem }"></select>
<div data-bind="if: item">
    <input type="text" data-bind="value: item().Text" />
</div>
<table>
    <thead>
        <tr>
            <th>Text</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: $data.Text"></td>
        </tr>
    </tbody>
</table>

Answer 1

当您更改“文本”属性时，我创建了一个新的jsFiddle示例，其中包含项目更新。

你的问题是“items”变量。如果你想更新项目属性，你必须使它们可观察：

var observableItems = [
    new ItemViewModel(1, "First item"),
    new ItemViewModel(2, "Second item")
];

function ItemViewModel(id, text){
    var self = this;
    self.Id = ko.observable(id);
    self.Text = ko.observable(text);
}

希望能帮助到你 ！