javascript - asp.net 中继器在 javascript 中使用模板

Question

我正在使用中继器更改 ASP.Net 列表页面以进行内联编辑。我想做的是为控件内部的编辑创建模板(以便我可以数据绑定(bind)下拉列表)，然后将 JavaScript 单击事件添加到该行，该事件将用模板的副本替换该行并填写原始绑定(bind)行中的字段。

这个 fiddle 显示了我所追求的: http://jsfiddle.net/AsciiSmoke/U3z4s/1/

我显然可以用纯 JavaScript 编写此代码，但我认为使用模板将为我提供绑定(bind)，并使这里的其他开发人员更容易更新。

干杯，Ascii烟

来自 JSFiddle 的代码

This
<br>
<table>
<tr>
    <td>Field 1</td>
    <td>Field 2</td>
    <td>Field 3</td>
</tr>
<tr>
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Value 3</td>
</tr> </table> <br>Becomes <br> <table>
<tr>
    <td>Field 1</td>
    <td>Field 2</td>
    <td>Field 3</td>
</tr>
<tr>
    <td>
        <input value="Value 1">
    </td>
    <td>
        <input value="Value 2">
    </td>
    <td>
        <select>
            <option>value 3</option>
            <option>value 4</option>
            <option>value 5</option>
        </select>
    </td>
</tr>
</table>

Answer 1

您实际上并不需要模板。您需要做的就是隐藏每个单元格中的表单字段，然后单击隐藏文本并显示表单字段。

This StackOverflow question与您正在寻找的内容相关和/或重复。

编辑#1:另一种方法是将所有表单字段的"template"封装在 SCRIPT 标记中:

<tr>
    <td>Field 1</td>
    <td>Field 2</td>
    <td>
        Field 3
        <script type="text/html">
            <td>
                <input value="Value 1">
            </td>
            <td>
                <input value="Value 2">
            </td>
            <td>
                <select>
                    <option>value 3</option>
                    <option>value 4</option>
                    <option>value 5</option>
                </select>
            </td>
        </script>
    </td>
</tr>

这样，表单字段作为字符串数据存在于每一行中，这比 DOM 树更节省内存。您只需在 tr 标记内查找第一个 script[type=text/html] 即可找到模板。那么问题就变成了如何使用更改后的值更新模板。您可能必须走 JavaScript template engine 的路线并将相关数据序列化为 JSON 并保存在 HTML5 data-* 属性中:

<tr data-values='{ "foo": "bar", ... }'>
    <td>Field 1</td>
    ...