预填充 jsrender 模板

Question

如何将选择（具有选项）呈现为表格的一部分？

$('select').append($('<option>').text('single'));
$('table').append($('#rowTmpl').render({name:'peter'}));

th,td {border:1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/BorisMoore/jsrender/master/jsrender.min.js"></script>
<div style="display:none" id="statis">
  <select></select>
</div>
<script id="rowTmpl" type="text/x-jsrender">
  <tr>
    <td>{{:name}}</td>
    <td>{{include tmpl=#statis /}}</td>
  </tr>
</script>

<table>
  <tr>
    <th>Name</th>
    <th>Stat</th>
  </tr>
</table>

第一个 javascript 行将一个选项附加到选择（第 4 个 html 行）。 第二个 javascript 行应该为peter 的人在表格中呈现一行。

问题：

1. 我无法将 div 设置为脚本标签，因为第一行 javascript 行找不到选择标签。
2. 我无法通过 {{include 呈现 div，因为 #statis 是 div 而不是脚本标签。

Answer 1

您的 {{include}} 有语法错误。应该是：

<td>{{include tmpl="#statis" /}}</td>

实际上你可以在隐藏的 div 中声明一个 JsRender 模板，但这通常不是一个好的做法，因为可能会有副作用。请参阅：https://stackoverflow.com/a/25609895/1054484。

您还可以从字符串声明模板 - 并根据需要预先动态操作字符串。

另见：

• http://www.jsviews.com/#compiletmpl
• http://www.jsviews.com/#tagsyntax@composition

$('select').append($('<option>').text('single'));
$('table').append($('#rowTmpl').render({name:'peter'}));

th,td {border:1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/BorisMoore/jsrender/master/jsrender.min.js"></script>
<div style="display:none" id="statis">
  <select></select>
</div>
<script id="rowTmpl" type="text/x-jsrender">
  <tr>
    <td>{{:name}}</td>
    <td>{{include tmpl="#statis" /}}</td>
  </tr>
</script>

<table>
  <tr>
    <th>Name</th>
    <th>Stat</th>
  </tr>
</table>