在 Mustache 中，如何获取当前部分的索引

Question

我正在使用 Mustache 并使用数据

{ "names": [ {"name":"John"}, {"name":"Mary"} ] }

我的胡子模板是：

{{#names}}
    {{name}}
{{/names}}

我想要做的是获得数组中当前数字的索引。比如：

{{#names}}
    {{name}} is {{index}}
{{/names}}

并打印出来

John is 1
Mary is 2

可以用 Mustache 得到这个吗？或者使用车把或其他扩展？

Answer 1

这就是我在 JavaScript 中的做法：

var idx = 0;

var data = { 
   "names": [ 
       {"name":"John"}, 
       {"name":"Mary"} 
    ],
    "idx": function() {
        return idx++;
    }
};

var html = Mustache.render(template, data);

你的模板：

{{#names}}
    {{name}} is {{idx}}
{{/names}}

Answer 2

作为参考，此功能现已内置于 Handlebars 中，并且与 Mustache 兼容。

使用 {{@index}}

{{#names}}
    {{name}} is {{@index}}
{{/names}}

约翰是 0

玛丽是 1

Answer 3

在handlebars.js 中，您可以使用辅助函数来完成此操作。 （事实上​​，这里提到的车把的优点之一 http://yehudakatz.com/2010/09 /09/announcing-handlebars-js/ 是你可以使用助手，而不必在调用模板之前重写对象

因此，你可以这样做：

  var nameIndex = 0;
  Handlebars.registerHelper('name_with_index', function() {
    nameIndex++;
    return this.name + " is " + nameIndex;
  })

然后你的模板可以是这样的：

{{#names}}
<li>{{name_with_index}}</li>
{{/names}}

你的数据是。与之前相同，即：

{ "names": [ {"name":"John"}, {"name":"Mary"} ] };

您会得到以下输出：

<li>John is 1</li>
<li>Mary is 2</li>

为了使其真正起作用，每次渲染模板时都需要重置 nameIndex，因此您可以在列表的开头有一个重置助手。代码如下所示：（

  var data = { "names": [ {"name":"John"}, {"name":"Mary"} ] };
  var templateSource = "<ul>{{reset_index}}{{#names}}<li>{{name_with_index}}</li>{{/names}}</ul>";
  var template = Handlebars.compile(templateSource);

  var helpers = function() {
    var nameIndex = 0;
    Handlebars.registerHelper('name_with_index', function() {
      nameIndex++;
      return this.name + " is " + nameIndex;
    });
    Handlebars.registerHelper('reset_index', function() {
      nameIndex = 0;
    })
  }();

  var htmlResult= template(data);
  $('#target').html(htmlResult);

  var htmlResult2= template(data);
  $('#target2').html(htmlResult2);

这可以正确渲染模板两次。）

Answer 4

您可以在对象列表上运行以下循环。

该方案具有以下优点：

• 不改变模型数据
• 索引可多次访问

代码：

for( var i=0; i< the_list.length; i++) {
    the_list[i].idx = (function(in_i){return in_i+1;})(i);
}

说明：

使用函数代替变量名，因此数据没有发生变异。闭包用于返回在循环中创建函数时的“i”值，而不是循环结束时的 i 值。

Answer 5

对于 Mustache 来说，更好的方法是使用一个使用 indexOf 获取索引的函数：

var data = { 
   names: [ {"name":"John"}, {"name":"Mary"} ],
    index: function() {
        return data.names.indexOf(this);
    }
};

var html = Mustache.render(template, data);

在模板中：

{{#names}}
    {{name}} is {{index}}
{{/names}}

缺点是这个 index 函数对数组进行了硬编码 data.names 为了使其更加动态，我们可以使用另一个函数，如下所示：

var data = { 
   names: [ {"name":"John"}, {"name":"Mary"} ],
    index: function() {
        return function(array, render) {
            return data[array].indexOf(this);
        }
    }
};

var html = Mustache.render(template, data);

在模板中使用：

{{#names}}
    {{name}} is {{#index}}names{{/index}}
{{/names}}

还有一个小缺点是您必须将数组名称传递给本示例中的索引函数名称，{{#index}}名称{{/index}}。

Answer 6

这里的好帮手：

// {{#each_with_index records}}
//  <li class="legend_item{{index}}"><span></span>{{Name}}</li>
// {{/each_with_index}}

Handlebars.registerHelper("each_with_index", function(array, fn) {
    var buffer = "";
    for (var i = 0, j = array.length; i < j; i++) {
        var item = array[i];

        // stick an index property onto the item, starting with 1, may make configurable later
        item.index = i+1;

        // show the inside of the block
        buffer += fn(item);
    }

    // return the finished buffer
    return buffer;

});

来源：https://gist.github.com/1048968

Answer 7

---

推荐的解决方案

---

我的建议是添加 index 键

let data = {
  "names": [
    {"name": "John"}, 
    {"name": "Mary"}
  ]
};

// Add an index manually
data = {
  names: [
    { index: 0, name: "John" },
    { index: 1, name: "Mary" }
  ]
};

// Add an index with a loop
data = data.names.map((name, index) => name.index = index);

// Nested arrays with indices (parentIndex, childIndex)
data = {
  names: [{
    parentIndex: 0,
    name: "John",
    friends: [{
      childIndex: 0,
      name: "Mary"
    }]
  }]
};

---

建议的 Mustache Index 解决方案存在问题

---

其他建议的解决方案并不那么干净，如下详述...

@Index< /strong>

Mustache 不支持 @Index

IndexOf

此解决方案运行时间为 O(n^2)，因此它没有最佳表现。此外，还必须为每个列表手动创建索引。

const data = {
  list: ['a', 'b', 'c'],
  listIndex: function () {
    return data.list.indexOf(this);
  }
};

Mustache.render('{{#list}}{{listIndex}}{{/list}}', data);

全局变量

这个解决方案运行时间为 O(n)，因此这里的性能更好，但也“污染了全局空间”（即向 window 对象添加属性，并且在浏览器窗口关闭之前，垃圾收集器不会释放内存），并且必须为每个列表手动创建索引。

const data = {
  list: ['a', 'b', 'c'],
  listIndex: function () {
    return (++window.listIndex || (window.listIndex = 0));
  }
};

Mustache.render('{{#list}}{{listIndex}}{{/list}}', data);

局部变量

该解决方案运行时间为 O(n)，不会“污染全局空间”，并且不需要为每个列表手动创建。然而，该解决方案很复杂，并且不能很好地处理嵌套列表。

const data = {
  listA: ['a', 'b', 'c'],
  index: () => name => (++data[`${name}Index`] || (data[`${name}Index`] = 0))
};

Mustache.render('{{#listA}}{{#index}}listA{{/index}}{{/listA}}', data);

Answer 8

如果您可以控制 JSON 字符串的输出，那么请尝试一下。

{ "names": [ {"name":"John", "index":"1"}, {"name":"Mary", "index":"2"} ] }

因此，当您创建 JSON 字符串时，请将索引添加为每个对象的另一个属性。

Answer 9

只要您不访问多个数组，您就可以将索引存储在助手上，并在上下文发生变化时递增。我正在使用类似于以下内容的东西：

var data = {
    foo: [{a: 'a', 'b': 'a'}, {'a':'b', 'b':'b'}], 
    i: function indexer() {
        indexer.i = indexer.i || 0;
        if (indexer.last !== this && indexer.last) {                                          
            indexer.i++;
        }   
        indexer.last = this;
        return String(indexer.i);
     }   
};

Mustache.render('{{#foo}}{{a}}{{i}}{{b}}{{i}}{{/foo}}', data);

Answer 10

（在节点 4.4.7、mustache 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。但是，此函数根本不会更改您的人员对象，因此其他代码（可能依赖于不存在的 ID 属性）不会受到影响。

算法是 O(N)，非常好而且快。

Answer 11

我正在使用预计算函数将“@index”注入数组。

const putIndexInArray = array => {
    let putIndex = (value, index) => {
        value['@index'] = index;

        return value;
    };

    if (!Array.isArray(array)) {
        return array;
    }

    return array.map(putIndex);
};

Mustache.render(template, {
    array: putIndexInArray(['Homer', 'Marge', 'Lisa'])
});

然后像这样使用：

{{#array}}
    {{@index}}
{{/array}}

Answer 12

我的主要用例是能够在项目上放置“活动”类。我尝试将“equals”帮助器与“index_for_each”帮助器结合起来，但它太复杂了。

相反，我想出了以下基本的“主动”助手。它非常具体，但对于任何菜单/选择列表场景来说都是一个常见的用例：

用法：

  <ul>
    {{{active 2}}}
    {{#each menuItem}}
      <li class="{{{active}}}">{{this}}</li>
    {{/each}}
  </div>

将使第三个菜单项具有“class='active'”。

助手在这里（这是 CoffeeScript 版本）：

active = 0
cur = 0
handlebars.registerHelper 'active', (item, context) ->
  if arguments.length == 2
    active = item
    cur = 0
    ''
  else if cur++ == active
    'active'

Answer 13

<script>var index = 1;</script>
{{#names}}
    {{name}} is <script>document.write(index++);</script>
{{/names}}

这工作得很好。