1

HTML を条件付きで ractive テンプレートに表示しようとしていますが、成功しません。

このJSFiddleでわかるように、結果は期待どおりではありません。テーブルは単一の行です。

私のテンプレート:

<table border="1">
    <tr>
    {{#list:num}}
        <td>{{.}}</td>
        {{#if num > 0 && num % 2 == 0}}
               </tr><tr>  
        {{/if}}
    {{/list}}
    </tr>
</table>

私のJavascript：

var ractive = new Ractive({
    el: "#cont",
    template: "#template",
    data: {
        list: [1, 2, 3, 4, 5, 6]
    }
});
4

1 に答える 1

3

HTML 文字列を生成する従来のテンプレート システムとは異なり、Ractive テンプレートの各セクションはそれ自体で有効でなければなりません。そうでなければ、仮想 DOM を構築することは不可能です。つまり</tr><tr>、セクション内に含めることはできません。(実際には、パーサーはエラーをスローするはずです - 私はGitHub で問題を提起しました。)

別のアプローチは、アイテムをグループ化し、グループを反復処理することです。

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>

于 2014-10-11T14:29:19.010 に答える