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(模板，视图);

期望的输出:

<li>0 - 水星</li><li>1 - 金星</li><li>2 - 地球</li><li>3 - 火星</li></ul>

另一种解决方案，不用胡乱用 Mustache.js

与其胡乱胡闹，不如使用 <ol></ol> 而不是 <ul></ul>，这将为每个项目添加前缀 index+1.

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

<li>水星</li><li>金星</li><li>地球</li><li>火星</li></ol>

以上将呈现为:

<代码>1.汞2. 金星3.地球4.火星

Mustache.js 方法

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

//这是我从脑后写的，它未经测试且无法保证//无需修改即可工作，尽管其背后的理论是有效的.var array = [123"，stackoverflow"，abc"]；var obj_array = [];对于(数组中的 idx)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(模板，视图);

This is what I'd like to do in Mustache.js but not seeing how with the documentation.

var view = {items:['Mercury','Venus','Earth','Mars']};
var template = "<ul> {{#items}}<li>{{i}} - {{.}}</li>{{/items}} </ul>";
var html = Mustache.to_html(template,view);

Desired output:

<ul>
  <li>0 - Mercury</li>
  <li>1 - Venus</li>
  <li>2 - Earth</li>
  <li>3 - Mars</li>
</ul>

An alternative solution, without fooling around with Mustache.js

Instead of fooling around with mustache you might as well use a <ol></ol> instead of <ul></ul>, that will prefix each item with index+1.

If you'd like you can use css to change the starting number to 0, and it will render exactly as you want. You can even change the dot after the number, to something such as " - ", and problem is solved.

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

the above will render as:

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

the Mustache.js way to do it

The proper method if you'd like to do it in mustache is to convert your array of strings to an array of objects, where index and string value is present.

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

这篇关于Mustache.js 中数组元素的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！