编辑记录列表一行？ [英] Edit one row in a list of records?

问题描述

我有一个记录列表，例如地址。它使用下面的HTML5 /淘汰赛code显示。

 ＆lt;节ID =清单数据绑定=的foreach：地址可见：地址（）长度大于0＆GT;
    ＆lt;物品＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;按钮＆gt;编辑＆LT; /按钮＆GT;
            ＆LT;跨度数据绑定=TEXT：DisplayAddress＆GT;＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; p =类错误数据绑定=可见：的ErrorMessage，文本：的ErrorMessage＆GT;＆LT; / P＆GT;
    ＆LT; /条＆GT;
＆LT; /节＆gt;
 

我要显示的可编辑输入框（）行下一个表的修改的按钮被点击之后。有没有产生大的HTML5 code什么办法？

我想说明以下的编辑的HTML中的＆LT以下; DIV＆GT; 点击修改的按钮之后。 （未完成）

 ＆LT; D​​IV＆GT;
    ＆LT;表＆gt;
        ＆所述; TR＆GT;
            ＆LT;第i个街address</th><th>Apt#</th><th>City</th><th>State</th><th>Zip</th>
        ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;＆LT;输入类型=文本级=COL1/＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;输入类型=文本级=COL2/＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;输入类型=文本级=COL3/＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;输入类型=文本级=COL4/＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;输入类型=文本级=COL5/＆GT;＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
    ＆LT;按键数据绑定=点击：saveAddress＆GT;保存＆LT; /按钮＆GT;
    ＆LT;按键数据绑定=点击：cancelAdding＆GT;取消＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

解决方案

有一些合理的选择：

1）使用如果结合来控制渲染（不只是知名度） HTML块。每行数据将有一个名为 isEditing 可观察到的财产。然后，添加行为功能来控制编辑/取消/等。你的文章模板将包括类似以下内容：

 ＆LT; D​​IV数据绑定=如果：isEditing＆GT;
   ＆LT;输入类型=文本数据绑定=值：DisplayAddress/＆GT;
＆LT; / DIV＆GT;
 

2）如果它只是一个领域，你可能希望创建一个自定义绑定处理程序，增加了你想要的行为元素（它会动态地添加/删除字段）。有在 ＃1这一技术的一些很好的例子。

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>

解决方案

There are a few reasonable options:

1) Use the if binding to control the rendering (not just visibility) of a block of HTML. Each row of data would have an observable property called isEditing. Then, add behavioral functions to control edit/cancel/etc. Your article template would include something like the following:

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

2) If it's just one field, you might want to create a custom binding handler that adds the behavior you want to an element (it would dynamically add/remove a field). There are a few good examples on Stackoverflow of this technique.

这篇关于编辑记录列表一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！