artTemplate-3.0是一個不錯的前臺模板,有了前臺的模板我們可以這樣來操作頁面,通過ajax來取得後臺的資料檔案,前臺的展示全部使用模板來實現,這樣的好處在於,pc,mobile.app可以使用同一套介面,pc,mobile,app根據不同的開發環境與語言,來自己呈現.

artTemplate-3.0,是一個簡的模板,但是官方給的例子有點簡單,對一複雜的物件使用的時候,沒有參考所以做一個demo作為參考

第一級是這樣的

Object {id: "1", name: "休閒食品、生鮮", url: "shangpin-cat1/category-1-b0.html", mapping: "1", cat_id: Object}

Object {id: "200", name: "糧油副食", url: "shangpin-cat3/category-3-b0.html", mapping: "3", cat_id: Object}

第一級中的cat_id是一個物件這樣的

第二級的cat_d對的object如下所示

對於這種情況寫了個demo大家參考下,這個複雜的陣列實際上是ecshop,小京東的分類模板,好複雜.

<script id="test" type="text/html">

    {{each list as value i}}

         <a href=" {{value.url}}">  {{value.name}} </a>  <br />

            {{each value.cat_id as tag d}}

             >> {{tag.name}}  ----

                    {{each tag.cat_id as atag ad}}
                        << {{atag.name}}
                    {{/each}}
                <br />
            {{/each}}
        <br />
    {{/each}}
</script>
 

如果不好除錯的話可以在console中寫程式碼除錯一下,基本上可以看出層次怎麼寫了

$.each(cars,function(value,i){console.log(i.cat_id);});