jsRender - 如何为模板内的控件设置 ID答案

【问题标题】：jsRender - How to set the ID for the controls inside a templatejsRender - 如何为模板内的控件设置 ID
【发布时间】：2013-09-29 13:50:54
【问题描述】：

我对 jsRender 真的很陌生，但是因为我发现它对于填充我的下拉列表非常有用（只有几行）我想问你是否可以使用 jsRender 创建控件而不在这些控件上显示任何数据（至少现在不行）

这是我现在正在做的连接几行html代码的简化版本

HTML 代码：

<table>
    <tr>
        <td>
            <fieldset id="fldRetorno">
                <legend>Return Details</legend>
                <input id="addRow" type="button" value="+ Add" />
                <table id="tbRetornosModelos" class="tabla-retorno">
                    <tbody></tbody>
                </table>
            </fieldset>
        </td>
    </tr>
</table>
</table>

JS代码：

 var counter = 0; // Counter for number of rows     

 $("#addRow").on('click', function () {
     counter = counter + 1;

     var newName = "Name" + counter;
     var newType = "Type" + counter;

     var newEnlaceEstruct = "tbExp_s1_e" + counter;
     var newRow = '<tr><td>Return # ' + counter + ':  </td>' +
         '<td>' + '  Name</td>' +
         '<td><input type="text" id="' + newName + '" />' + '</td>' +
         '<td>Data Type</td>' +
         '<td><select name="select" id="' + newType + '"> <option value="Seleccione" selected>Select...</option> <option value="Number" >Number</option><option value="Text">Text</option></select></td>' +
         '<td><input type="button" value="-Remove" class="deleteFila"></td>' +
         '<td><input type="hidden" id="enlace' + counter + '" value="' + newEnlaceEstruct + '" /></td>' +
         '</tr>';
     $('table.tabla-retorno >tbody').append(newRow);

     $(".deleteFila").on("click", function (event) {
         $(this).closest("tr").remove();
     });
 });

jsfiddle 用于 simplified 版本http://jsfiddle.net/edaloicaro18/YURDR/2/

将所有列连接成一行，然后将其分配给表 append(newRow) 的部分是我想要摆脱的部分。我曾想过使用在 <script> 标签中声明的模板，将所有 id 放入一个 json 数组并将其传递给 render 方法，就像我对下拉列表所做的那样，我几乎可以肯定它会做。

但是当我必须编辑时我该怎么办（而不是像我现在正在做的那样插入）？然后，我不仅要为控件生成 id，还要在这些控件中显示数据。那我该怎么办？？ jsRender在render方法中是否接受多个数据源？？？

遇到这种情况你会怎么做？也许我只是在鼹鼠山上造山

感谢您的帮助，阿克塞尔

附：这是我需要做的complete 版本，只是为了提供一个更好的主意。 http://jsfiddle.net/edaloicaro18/4yQML/25/embedded/result/ 我认为如果我找到了如何处理简化版本，我不会对复杂版本有任何问题。

【问题讨论】：

标签： jquery jsrender

【解决方案1】：

JsRender 允许您将任何您想要的数据传递给渲染方法，还允许您在附加的上下文参数中传递辅助方法和元数据等：

myTemplate.render(data, context)

render 方法的 API 文档是here

从模板中，您可以通过~someProperty 或~someMethod(...) 访问上下文对象的属性或方法。

但您可能会考虑使用 JsRender 来呈现您的全部内容，而不仅仅是选项。如果您使用 JsViews，那么您不需要编写代码来附加或删除 DOM 元素。它可以声明式地工作。

这里有一个非常简单的例子Data-linked tags，还有更多：JsViews samples。

您可能也对this page（更高级）感兴趣 - 因为它表明您有时可以选择插入 ID 或使用不再需要的替代方法...

【讨论】：