在Mustache.js中一个数组元素的索引
Index of an array element in Mustache.js
这就是我想在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}}
- 在函数中添加数组元素的数值
- 访问JSON对象内部的数组元素
- 如何使一个Math.random数组元素比另一个数组元素更有可能被选中
- 如果一个键匹配,如何删除数组元素
- 将排序数组的数组元素移动到具有特殊逻辑的另一个位置
- Javascript关联数组:推送一个对象会重写其他数组元素
- 在一个对象的Javascript数组中,如果一个特定的数组元素本身就是一个对象数组,我如何通过名称/ID来定位该元素
- 我如何获得一个JS数组,它有一些元素也是数组,并使ALL数组元素成为顶级元素
- AngularJs过滤到单个数组元素并输出一个属性
- 在php中,找到显示的数组元素,并提供到下一个和上一个的链接
- Javascript将数组元素交换到另一个索引并删除旧索引
- 如何将数组元素拆分为2,并返回一个已拆分原始元素的新数组
- 如果不使用JavaScript跳到下一个,请检查数组元素是否存在
- Json-在数组元素之间插入一个新对象
- 计算JavaScript数组元素的出现次数,并放入一个新的2d数组
- 如何用另一个给定的数组元素替换数组元素
- If数组元素包含一个句号
- 如何在POST请求之前处理一个新的数组元素?
- 定义一个函数在Meteor中匹配文档数组元素和文档值
- 我如何得到Json数组元素一个接一个的jquery上不同的id'