/*

{{>partials}}以>开始表示子模块，如{{> address}}；

当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：

*/

var data = {

    "company": "Apple",

    "address": {

        "street": "1 Infinite Loop Cupertino</br>",

        "city": "California ",

        "state": "CA ",

        "zip": "95014 "

    },

    "product": ["Macbook ","iPhone ","iPod ","iPad "]

}

//主模板

var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>";

//子模板写法1：定义一个子模块对象。里面放子模板。

var partials = {

    address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"

}

var html = Mustache.render(tpl, data, partials);

//子模板写法2：直接写在第三个参数里

var html = Mustache.render(tpl, data, {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"});

document.getElementById("target").innerHTML = html;

var view = {

    name: "Joe",

    winnings: {

        value: 1000

    }

};

var template = "Welcome, {{name}}! {{#winnings}} {{>winnings}}{{/winnings}} "

var partials = {

    winnings: "You just won ${{value}}"

};

var output = Mustache.to_html(template, view, partials);

document.getElementById("target").innerHTML = output;