1. 程式人生 > >ArtTemplet模板 引數傳遞 動態繫結

ArtTemplet模板 引數傳遞 動態繫結

<script id="test" type="text/html">
        測試模板:{{Name}}
        {{Item = QueryPage(20)}}
        {{ each Item as value i}}
          第 {{i}} 個值 {{value}}<br/>
        {{/each}}
        <br /><br />
        重新設定後繫結:<br />
        {{Item = QueryPage(50)}}
        {{ each Item as value i}}
        第 {{i}} 個值 {{value}}
        &nbsp;&nbsp;&nbsp;
        {{/each}}
    </script>
        <script type="text/javascript">
            
            var data = {
                Name: "我",
                Des: "--------XXrfgsdfgsd",
                Item: null,
                QueryPage: function (len) {
                    var item = [];
                    for (var i = 0; i < len; i++)
                        item.push("str" + i);
                    return item;
                },
                Count: 0
            }


            
            var fuc = template.compile(document.getElementById("test").innerHTML, data);
            var info = fuc(data);
            document.write(info);


        </script>

沒有使用helper傳遞函式,直接在模板上傳遞引數.

注意事項: 

     呼叫的函式 QueryPage 需要是在傳入物件上定義的函式。

     QueryPage內部對Item的操作會失效。必須使用返回值,返回到同名的臨時變數上。所以,一個函式只能設定一個變數。變數不能使用var定義,artTemplate會自動定義。

     一個函式呼叫會導致一個空字串被push到結果中,這是多餘的操作。所以,非必要情況下,不要使用這種方式來構造資料。