Question

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

$('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的表格呈现一行。

问题：

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

Answer 1

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

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

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

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

另见：

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

1 个答案: