在Mustache.js中一个数组元素的索引

Index of an array element in Mustache.js

本文关键字：一个 数组元素 索引 Mustache js      更新时间：2023-09-26

这就是我想在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>

在寻找快速干净的解决方案吗?

只需添加一个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}}

工作原理

我们在data中添加一个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 on In Mustache，如何获得当前Section的索引

一个替代的解决方案，不用瞎折腾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);

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

Ref: In Mustache，如何获取当前Section的索引

如果您想对每个条目多次访问索引，我建议如下:

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

请注意，您可以对每个条目多次访问index而不会得到错误的值。

(在节点4.4.7,moustache 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.firstName一样阅读person.id。但是，此函数根本不会更改people对象，因此其他代码(可能依赖于ID属性不存在)不会受到影响。

你可以使用Handlerbars.js，然后

Handlebars.registerHelper("inc", function (value, options) {
    return parseInt(value) + 1;
});
在HTML中使用 
{{inc @@index}}
相关文章：