编辑：

Question

我需要做this之类的事情，但需要使用模板。

您知道如何在模板中使用计数器吗？我问你，因为我需要那些计数器来为我创建的输入生成ID。

HTML代码：

<div> 
    <span>N Cols:</span>
    <input id="txtNCols" type="text" /> 
    <span>N Rows:</span>
    <input id="txtNRows" type="text" />
    <input type="button" id="btnCrearMatriz" value="Create" />
</div>

JS代码

$('#btnCrearMatriz').click(function () {
    var rows = $('#txtNRows').val(); //here's your number of rows and columns
    var cols = $('#txtNCols').val();
    var table = $('<table><tbody>');
    for (var r = 0; r < rows; r++) {
        var tr = $('<tr>');
        for (var c = 0; c < cols; c++){
             var td=$('<td>');
             var textbox="<input type='text' id='txt_r" +(r+1) + "c"+ (c+1) + "'/>";
             td.append(textbox);
             td.appendTo(tr);
        }      
        tr.appendTo(table);
    }

    table.appendTo('body');
});

提前致谢。

编辑：

我刚刚找到this。好吧，似乎得到我需要的东西，比我想象的要困难得多。

无论如何，我尝试过类似的东西，但显然它不支持多层嵌套:(

<script id="table_template" type="text/x-jsrender">
   <table>
        <tbody>
           {{range start=1 end=rows}}
                  <tr>
                   {{range start=1 end=cols}}
                        <td>
                            <input type="text"/>
                        </td>
                   {{/range}}
                  </tr>         
            {{/range}}
        </tbody>
   </table>
</script>

Answer 1

它不适合你的原因是JsRender模板当然是数据驱动的。当您编写{{range start=1 end=cols}}时，表示您将 end 设置为cols的值作为当前数据项的属性。但是当前数据项不是您的原始数据对象，因为您使用的是嵌套模板。

range的工作方式是你传递一个数组，在这种情况下它会遍历你指定范围的数组，或者你没有传递一个数组，在这种情况下它创建它自己的数组 - 从指定的开始到结束的整数数组。

{{range myArray start=1 end=3}}

因此，您的{{range}}标记正在迭代生成的数组，并且块中的数据项该数组中的当前整数。

如果您想从更高的位置获取数据项，可以使用~root.cols（例如 - 获取根数据的cols属性传入）或者您可以使用~foo=someExpression创建一个辅助变量，可以从任何级别的嵌套模板块访问它。

基于此，以下是解决上述情况的几种方法：

使用{{range}}

<script id="myTmpl" type="text/x-jsrender">
  <table>
    <tbody>
      {{range start=1 end=rowCount ~colCount=colCount}}
        <tr>
          {{range start=1 end=~colCount ~rowNo=#index+1}}
            <td>
              <input type="text" id="{{:'r' + ~rowNo + 'c' + (#index + 1)}}" />
            </td>
          {{/range}}
        </tr>
      {{/range}}
    </tbody>
  </table>

针对数据呈现如下：

$.templates("#myTmpl").render({rowCount: 10, colCount: 3)

或使用{{for}}

  <table>
    <tbody>
      {{for rows ~cols=cols}}
        <tr>
          {{for ~cols ~rowNo=#index+1}}
            <td>
              <input type="text" id="{{:'r' + ~rowNo + 'c' + (#index + 1)}}" />
            </td>
          {{/for}}
        </tr>
      {{/for}}
    </tbody>
  </table>
</script>

针对数据呈现如下：

$.templates("#myTmpl").render({rows:[1,2,3,4], cols:[1,2]})

jsRender为html表创建一个模板，给定一定数量的行和列

编辑：

1 个答案: