чередование строк и первые / последние занятия с mustache.js - PullRequest
Новая
       9

чередование строк и первые / последние занятия с mustache.js

13 голосов
/ 11 декабря 2010

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

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

Ответы [ 2 ]

12 голосов
/ 11 декабря 2010

Усы очень легкие, поэтому 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);
11 голосов
/ 02 октября 2012

Я рекомендую сделать оба из них с pure 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;}

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

...