Чередование строк и первый/последний классы с mustache.js

Часто хочется обрабатывать первый и/или последний элементы в списке иначе, чем другие. есть ли способ сделать это с помощью усов? как насчет чередования строк?

(Очевидно, что всегда можно использовать jquery или что-то другое, чтобы применить класс css после обработки шаблона или что-то еще, но мне интересно, что-то еще на уровне шаблона.)

Ответы

Ответ 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);

Ответ 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)

Стилизация последнего элемента динамического списка

Использование: last-child.

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

: last-child не поддерживается в ie7 и ie8 (http://caniuse.com/#search=last-child), поэтому будьте осторожны, что вы делаете что-то, что будет изящно деградировать здесь. Как ни странно: first-child is, так что вы можете, скажем, покрасить все элементы по умолчанию, а затем явно удалить их из первого дочернего элемента, и это действительно будет работать во всех браузерах.