预填充 jsrender 模板

Question

如何将 select（具有选项）呈现为 table 的一部分？

$('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 行将一个选项附加到 select（第 4 个 html 行）。第二行 javascript 应该为 peter 人的 table 呈现一行。

问题：

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

Answer 1

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

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

事实上，您可以在隐藏的 div 中声明一个 JsRender 模板，但这通常不是一个好的做法，因为可能会有副作用。参见：.

您还可以从字符串声明模板 - 如果需要，可以预先动态操作字符串。

另请参阅：

$('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>

预填充 jsrender 模板

Prefill jsrender template

javascript

jquery

json

jsrender