使用mustache.js行条带化和第一个/最后一个类

Question

通常,人们希望将列表中的第一个和/或最后一个项目与其他项目区别对待.有没有办法用胡子做到这一点？行条纹怎么样？

(显然,在处理模板之后,人们总是可以使用jquery或其他任何方法来应用css类,或者其他什么,但我想知道模板级别的更多内容.)

Answer 1

小胡子很轻,所以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);

Answer 2

我建议用纯css/css3来做这两个,不需要js!当你尝试做的事情不是处理内容时,这似乎是理想的.未来就是现在!:

Css行条纹:

使用 nth-child();

http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/

这不会显示ie7和ie8(http://caniuse.com/#search=nth-child),但他们仍然可以获得内容,所以我认为这是一个胜利.

设置静态列表的最后一个元素:

#nav li + li + li{
// Crazy styles on the 3rd li here!
}

(有很好的支持:http://caniuse.com/#search=sibling)

样式化动态列表的最后一个元素

使用:最后一个孩子.

div#test p:last-child {color: red;}
div#test p:first-child {text-decoration: underline;}

:ie7和ie8(http://caniuse.com/#search=last-child)不支持last-child ,所以要小心你正在做一些会在这里优雅地降级的东西.奇怪的是,:第一个孩子是,所以你可以说,默认情况下你可以对所有元素进行着色,然后从第一个孩子中明确地删除它们,这实际上适用于所有浏览器.