javascript - 带有 mustache.js 的行 strip 化和第一个/最后一个类

Question

人们通常希望将列表中的第一项和/或最后一项与其他项区别对待。有没有办法用 mustache 做到这一点？行条纹呢？

(显然，在处理完模板后，人们总是可以使用 jquery 或其他任何工具来应用 css 类，但我想知道模板级别的更多信息。)

Answer 1

mustache 很轻，所以 AFAIK，它不提供该功能。

你可以使用类似的东西来获得偶数/奇数类:

var view = {
  arr: ['one', 'two', 'three'],
  clazz: function() {
    return _counter++ % 2 == 0 ? 'even' : 'odd';
  }
};

var template = '{{#arr}}<span class="{{clazz}}">{{.}}</span>{{/arr}}';
Mustache.to_html(template, view);

或者先对数据进行预处理，类似这样:

function preprocessArrayWithFirstLastClass(src) {
  var clazz;
  for (var i = 0; i < src.length; i++) {
    clazz = i % 2 == 0 ? 'even' : 'odd';
    if (i == 0) clazz += ' first';
    if (i == src.length - 1) clazz += ' last';
    src[i].clazz = clazz;
  }
}

var view = {
  arr: preprocessArrayWithFirstLastClass([{name: 'one'}, {name: 'two'}, {name: 'three'}])
};

var template = '{{#arr}}<span class="{{clazz}}">{{name}}</span>{{/arr}}';
Mustache.to_html(template, view);