0

I have a list of records, e.g. addresses. It's displayed using the following html5/knockout code.

<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>

I want to show a table of editable input boxes () under the row after Edit button is clicked. Is there any way without generate a big html5 code?

I want to show the following editing html below the <div> after click the Edit button. (not completed)

<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>
4

1 回答 1

1

有几个合理的选择：

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

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

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

于 2013-02-10T15:37:27.057 回答