Mustache.js中数组元素的索引

Question

这是我想在Mustache.js中做的，但没有看到文档的内容。

var view = {items:['Mercury','Venus','Earth','Mars']};
var template = "<ul> {{#items}}<li>{{i}} - {{.}}</li>{{/items}} </ul>";
var html = Mustache.to_html(template,view);

期望的输出：

<ul>
  <li>0 - Mercury</li>
  <li>1 - Venus</li>
  <li>2 - Earth</li>
  <li>3 - Mars</li>
</ul>

Answer 1

寻找快速清洁的解决方案？

只需添加index功能

即可

var data = {
    items: [{
            name: Aliasghar
            , grade: 19
        }, {
            name: Afagh
            , grade: 20
    }]
    , index: function() {
        return ++window['INDEX']||(window['INDEX']=0);
    }
}

，您的模板可能是这样的：

{{#items}}
    {{index}} -- {{name}} is {{grade}}
{{/items}}

---

如何运作

我们向数据添加index: function(){}，我们将其用作模板中的普通函数。 此函数为全局可用的window对象添加密钥;然后一个接一个地增加它。

与多个列表一起使用

请注意，如果您一个接一个地使用多个模板，则需要重置window['INDEX']或将其更改为其他内容，例如window['YEKI_DIGE']。 另一种方法是添加resetIndex函数。这是方法：

var data = {
    items: [{
            name: Aliasghar
            , grade: 19
        }, {
            name: Afagh
            , grade: 20
    }]
    , index: function() {
        return ++window['INDEX']||(window['INDEX']=0);
    }
    , resetIndex: function() {
        window['INDEX']=null;
        return;
    }
}

，您的模板可能是这样的：

{{#items}}
    {{index}} -- {{name}} is {{grade}}
{{/items}}
{{resetIndex}}

受到此回答的启发：来自https://stackoverflow.com/a/10208239/257479的dave来自In Mustache, How to get the index of the current Section

Answer 2

另一种解决方案，无需使用Mustache.js

您可以使用<ol></ol>代替<ul></ul>而不是胡子，而不是index+1，这将为每个项目添加dot作为前缀。

如果您愿意，可以使用css将起始编号更改为0，并且它将完全按照您的需要进行渲染。您甚至可以将号码后面的" - "更改为<ol> <li>Mercury</li> <li>Venus</li> <li>Earth</li> <li>Mars</li> </ol> 之类的问题，并解决问题。

1. Mercury
2. Venus
3. Earth
4. Mars

以上将呈现为：

// I wrote this from the back of my head, it's untested and not guaranteed
// to work without modifications, though the theory behind it is valid.


var array     = ["123","stackoverflow","abc"];
var obj_array = [];

for (idx in array)
   obj_array.push ({'index': idx, 'str': array[idx]});

var view     = {items: obj_array};
var template = "<ul>{{#items}}<li>{{index}} - {{str}}</li>{{/items}}</ul>";
var html     = Mustache.to_html(template,view);

---

Mustache.js的方法

如果你想在胡子中执行它，那么正确的方法是将你的字符串数组转换为一个对象数组，其中包含索引和字符串值。

{{1}}

Answer 3

如果你可以使用handlebars.js，那么你可以使用这个要点中提到的部分： https://gist.github.com/1048968

参考：In Mustache, How to get the index of the current Section

Answer 4

如果你想每个项目多次访问索引，我会建议如下所示。

var data = {
    items: [{
        name: Aliasghar
        , grade: 19
    }, {
        name: Afagh
        , grade: 20
    }]
    , setUpIndex: function() {
        ++window['INDEX']||(window['INDEX']=0);
        return;
    }
    , getIndex: function() {
        return window['INDEX'];
    }
    , resetIndex: function() {
        window['INDEX']=null;
        return;
    }
}

• 在迭代Mustache中的每个列表之前使用restIndex函数。
• 使用每个列表项开头的setUpIndex函数设置该项目的索引。
• 使用getIndex项访问索引。

举个例子，考虑一下。

{{resetIndex}}
{{#items}}
    {{setUpIndex}}
    {{getIndex}}. {{name}} is at index {{getIndex}}
{{/items}}

请注意如何在不获取错误值的情况下多次访问每个项目的索引。

Answer 5

您可以使用Handlerbars.js，然后

Handlebars.registerHelper("inc", function (value, options) {
    return parseInt(value) + 1;
});

在HTML中使用

{{inc @@index}}

Answer 6

（在节点4.4.7中测试，胡须2.2.1。）

如果你想要一个很好的干净的功能方式来做，那不涉及全局变量或改变对象本身，使用这个函数;

var withIds = function(list, propertyName, firstIndex) {
    firstIndex |= 0;
    return list.map( (item, idx) => {
        var augmented = Object.create(item);
        augmented[propertyName] = idx + firstIndex;
        return augmented;
    })
};

在您组装视图时使用它;

var view = {
    peopleWithIds: withIds(people, 'id', 1) // add 'id' property to all people, starting at index 1
};

这种方法的巧妙之处在于它创建了一组新的视图模型。对象，使用旧集作为原型。您可以像阅读person.id一样阅读person.firstName。但是，此功能根本不会更改您的人员对象，因此其他代码（可能依赖于不存在的ID属性）将不会受到影响。