2014-02-13 4 views
1

Я узнал, что мы можем использовать @index в помощнике #each, но это, похоже, мало помогает.Как реализовать Zebra Striping в таблицах handlebar.js?

Я пытаюсь реализовать необязательный чередование зебры в некоторых шаблонах руля.

{#if ((@index % 2) == 0) }} 
    <tr class="darkRow"> 
{{else}} 
    <tr> 
{{/if}} 

Но когда я компилирую шаблон ошибка

>> Error: Parse error on line 3: 
     {{#if ((@index % 2) == 0) 
>> ----------------------^ 
>> Expecting 'CLOSE', 'CLOSE_UNESCAPED', 'STRING', 'INTEGER', 'BOOLEAN', 'ID', 'DATA', 'SEP', got 'INVALID' 

Можно ли сделать что-то вроде этого?

+1

Почему бы вам просто не использовать CSS для этого ...? ': nth-child (even/odd)' – CBroe

+0

Совместимость с браузером. Должен поддерживаться еще в IE8. http://caniuse.com/#search=nth-child – TheSisb

+0

Выполняйте свою логику перед передачей контекста данных в дескриптор, а затем просто проверьте, истинна или неверна переменная в инструкции handlebar if. – MarcoL

ответ

0

Я внедрил свое собственное решение, изменив каждого помощника. Вот мой новый каждый код в handlebars.js файл

instance.registerHelper('each', function(context, options) { 
    var fn = options.fn, inverse = options.inverse; 
    var i = 0, ret = "", data; 

    if (isFunction(context)) { context = context.call(this); } 

    if (options.data) { 
    data = createFrame(options.data); 
    } 

    if(context && typeof context === 'object') { 
    if (isArray(context)) { 
     for(var j = context.length; i<j; i++) { 
     if (data) { 
      // For zebra tables 
      data.zebra = (((i+1)%2) == 0) ? "even" : "odd"; 
      // end mod 
      data.index = i; 
      data.first = (i === 0); 
      data.last = (i === (context.length-1)); 
     } 
     ret = ret + fn(context[i], { data: data }); 
     } 
    } else { 
     for(var key in context) { 
     if(context.hasOwnProperty(key)) { 
      if(data) { 
      data.key = key; 
      data.index = i; 
      data.first = (i === 0); 
      } 
      ret = ret + fn(context[key], {data: data}); 
      i++; 
     } 
     } 
    } 
    } 

    if(i === 0){ 
    ret = inverse(this); 
    } 

    return ret; 
}); 

И я использую его в {{#each хй}} петля в моих шаблонах, поставив класс = «{{@ зебра}}» на моей диве или trs.

Надеюсь, что это поможет другим!

Смежные вопросы