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

灵感来自这个答案:来自Dave on In Mustache的/sf/answers/714576761/ ,如何获取当前部分的索引

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的方法

如果你想在胡子中执行它,正确的方法是将字符串数组转换为对象数组,其中存在索引和字符串值.

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