编辑记录列表中的一行？答案

【问题标题】：Edit one row in a list of records?编辑记录列表中的一行？
【发布时间】：2013-01-25 17:48:15
【问题描述】：

我有一个记录列表，例如地址。它使用以下 html5/knockout 代码显示。

<section id="lists" data-bind="foreach: addresses, visible: addresses().length > 0">
    <article>
        <div>
            <button>Edit</button>
            <span data-bind="text: DisplayAddress"></span>
        </div>
        <p class="error" data-bind="visible: ErrorMessage, text: ErrorMessage"></p>
    </article>
</section>

我想在单击编辑按钮后的行下显示一个可编辑输入框表（）。有什么办法不生成大的 html5 代码？

单击编辑按钮后，我想在<div> 下方显示以下编辑 html。（未完成）

<div>
    <table>
        <tr>
            <th>Street address</th><th>Apt#</th><th>City</th><th>State</th><th>Zip</th>
        </tr>
        <tr>
            <td><input type="text" class="col1"/></td>
            <td><input type="text" class="col2"/></td>
            <td><input type="text" class="col3"/></td>
            <td><input type="text" class="col4"/></td>
            <td><input type="text" class="col5"/></td>
        </tr>
    </table>
    <button data-bind="click: saveAddress">Save</button>
    <button data-bind="click: cancelAdding">Cancel</button>
</div>

【问题讨论】：

除非它已经存在于 DOM 中，否则您希望如何在不将其插入 DOM 的情况下显示表格？真的不清楚你在问什么。
我对此了解不多，但可以使用 Flash 对象吗？
@charlietfl 你是对的。我已经删除了不插入 DOM 的要求。

标签： javascript jquery html asp.net-mvc-4 knockout.js

【解决方案1】：

有几个合理的选择：

1) 使用if 绑定来控制HTML 块的呈现（不仅仅是可见性）。每行数据都有一个名为isEditing 的可观察属性。然后，添加行为函数来控制编辑/取消/等。您的文章模板将包括以下内容：

<div data-bind="if:isEditing">
   <input type="text" data-bind="value: DisplayAddress" />
</div>

2) 如果它只是一个字段，您可能想要创建一个自定义绑定处理程序，将您想要的行为添加到一个元素（它会动态添加/删除一个字段）。 Stackoverflow 上有几个很好的例子。

【讨论】：