Question

我有一份记录列表，例如地址。它使用以下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>

Answer 1

有几个合理的选择：

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

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

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

编辑记录列表中的一行？

1 个答案: