Question

使用的数据内嵌在javascript面板的顶部。

如果您点击结果面板中的“显示详细信息”链接，您将获得一些与该表中列表下方填充的药物相关的更多数据。如果单击drugName行中的“编辑”，则可以更改该药物名称。如果更改名称，它将反映在数据表和数据表上方的标题中。它将不在结果面板顶部的列表中更新（这是一个不同的observableArray）。

我无法弄清楚如何使用一个observableArray完成所有工作。我用 data.preferredDrugs 填充我的 drugList oservableArray（这是一个对象数组，然后我使用foreach：drugList进行迭代）。如果我用数据填充它，我不知道如何迭代preferredDrugs对象数组。这就是我最终得到两个observableArrays的原因 - 一个用于药物名称，另一个用于药物详细信息。

如何使用一个observableArray进行此工作，因此如果您在表格中编辑药物名称，则会反映无处不在。

Answer 1

我重写了你的小提琴，以消除对jquery的依赖。

http://jsfiddle.net/jeff1203/EPFbQ/

有关修复的一些注意事项：

由于您希望能够编辑名称并使更改可见，因此您需要至少使名称可观察。

self.drugList = ko.observableArray(
    ko.utils.arrayMap(data.preferredDrugs, function (obj) {
        return ko.utils.extend(obj, {
            "drugName": ko.observable(obj["drugName"]),
        });
    })
);

如果您跟踪所选药物，编辑文本框的内容以及您是否正在编辑的状态，将会更容易。这有助于简化视图和查看模型代码。淘汰赛将会解决所有其他问题。

// current drug
self.currentDrug = ko.observable();

// flag indicating we're editing the currently selected drug name
self.isEditing   = ko.observable(false);
// observable representing the editing text box
self.editTextBox = ko.observable();
// this will help with setting focus on the text box
self.editTextBox.hasfocus= ko.observable(false);

保存编辑现在只需将所选对象的名称设置为编辑文本框的内容。

// save an edit
self.editSave = function (obj) {
    // copy the edited name to the current drug name
    obj.drugName(self.editTextBox());

    self.isEditing(false);
};

您可以使用with binding设置绑定的上下文，而不是foreach。

使用绑定设置css类并切换可见性，knockout将为您完成繁重的工作。

<td data-bind="css: { 'editing': $root.isEditing }">
    <span data-bind="visible: !$root.isEditing(), text: drugName" class="readonly"></span>
    <input id="edit_drugname" data-bind="value: $root.editTextBox, hasfocus: $root.editTextBox.hasfocus, css: { 'edit_textfield': !$root.isEditing() }" type="text" value="" size="35" />
    <button data-bind="click: $root.editSave, css: { 'edit_buttons': !$root.isEditing() }" class="save">Save</button>
    <button data-bind="click: $root.editCancel, css: { 'edit_buttons': !$root.isEditing() }" class="cancel">Cancel</button>
    <ul class="detail_actions" data-bind="visible: !$root.isEditing()">
        <li><a data-bind="click: $root.edit" href="#" class="edit">edit</a></li>
    </ul>
</td>

有人可以解释如何将两个observableArrays重写为一个吗？

1 个答案: