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 前缀。

如果您愿意，可以使用 css 将起始数字更改为 0，它会完全按照您的意愿呈现。甚至可以把数字后面的dot改成" - "之类的，问题就解决了。

<ol>
  <li>Mercury</li>
  <li>Venus</li>
  <li>Earth</li>
  <li>Mars</li>
</ol>

以上将呈现为：

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

---

Mustache.js 方法

如果您想在 mustache 中执行此操作，正确的方法是将字符串数组转换为对象数组，其中存在索引和字符串值。

// 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);

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
};

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