Question

建议我任何好的小胡子doc。另外，我想知道如何获得count or the loop no。我是说如何在小胡子中做for loop。

在下面的代码中，我希望在每个循环中更改id

<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>  
<script>

var data, template, html;

data = {
    name : "Some Tuts+ Sites",
    big: ["Nettuts+", "Psdtuts+", "Mobiletuts+"],
    url : function () {
        return function (text, render) {
            text = render(text);
            var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
            return '<a href="' + url + '">' + text + '</a>';
        }
    }
};

 template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no"> {{#url}} {{.}} {{/url}} </li> {{/big}}  </ul>';

html = Mustache.to_html(template, data);

document.write(html)

</script>
<body></body>

Answer 1

你无法获得Mustache中的数组索引，Mustache非常简单，并希望你在设置数据时完成所有工作。

但是，您可以调整数据以包含索引：

data = {
    //...
    big: [
        { i: 0, v: "Nettuts+" },
        { i: 1, v: "Psdtuts+" },
        { i: 2, v: "Mobiletuts+" }
    ],
    //...
};

然后调整模板以使用{{i}}属性中的id和{{v}}而不是{{.}}来获取文字：

template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no-{{i}}"> {{#url}} {{v}} {{/url}} </li> {{/big}}  </ul>';

另外，您可能希望在url中添加一个方案：

url : function () {
    return function (text, render) {
        text = render(text);
        var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
        return '<a href="http://' + url + '">' + text + '</a>';
        //---------------^^^^^^^
    }
}

演示：http://jsfiddle.net/ambiguous/SFXGG/

Answer 2

扩展@ mu的答案，你也可以在数据对象中保留一个索引，并让模板引用它，函数会增加它。所以你不需要将i添加到每个项目中。见demo：http://jsfiddle.net/5vsZ2/

建议任何好胡子文件

2 个答案: