問題描述

這是我想在 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模板網！