[英]RactiveJS template conditional HTML
I am trying to have HTML appear conditionally in ractive template with no success. 我试图让HTML有条不紊地出现在ractive模板中但没有成功。
As you can see in this JSFiddle the result is not as expected - table is a single row. 正如您在此JSFiddle中看到的那样 ,结果并不像预期的那样 - 表是一行。
My template: 我的模板:
<table border="1">
<tr>
{{#list:num}}
<td>{{.}}</td>
{{#if num > 0 && num % 2 == 0}}
</tr><tr>
{{/if}}
{{/list}}
</tr>
</table>
My Javascript: 我的Javascript:
var ractive = new Ractive({
el: "#cont",
template: "#template",
data: {
list: [1, 2, 3, 4, 5, 6]
}
});
Unlike traditional templating systems, where you're generating an HTML string, each section of a Ractive template must be valid in its own right, otherwise it's impossible to construct the virtual DOM. 与您生成HTML字符串的传统模板系统不同,Ractive模板的每个部分本身必须是有效的,否则无法构造虚拟DOM。 That means that you can't have </tr><tr>
inside a section. 这意味着你不能在一个部分内有</tr><tr>
。 (Really, the parser should throw an error - I've raised an issue on GitHub .) (实际上,解析器应该抛出一个错误 - 我在GitHub上引发了一个问题 。)
A different approach would be to group the items, and iterate over the groups: 另一种方法是对项目进行分组,并迭代组:
var ractive = new Ractive({ el: "#cont", template: "#template", data: { list: [1, 2, 3, 4, 5, 6] }, computed: { grouped: function () { var list = this.get( 'list' ), grouped = [], group; group = []; grouped.push( group ); list.forEach( function ( item, i ) { if ( i > 0 && i % 2 == 0 ) { group = []; grouped.push( group ); } group.push( item ); }); return grouped; } } });
<script src="http://cdn.ractivejs.org/0.6.0/ractive.js"></script> <script type="text/html" id="template" > <table border="1"> {{#each grouped}} <tr> {{#each this}} <td>{{.}}</td> {{/each}} </tr> {{/each}} </table> </script> <div id="cont"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.