如何在handlebar.js表中實現斑馬條紋？

我發現我們可以在#each助手中使用@index，但這似乎沒有多大幫助。如何在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'

是否有可能做這樣的事情？

來源

2014-02-13 TheSisb

你爲什麼不用這個CSS ......？ '：nth-child（偶數/奇數）' – CBroe

瀏覽器兼容性。必須早在IE8的支持。 http://caniuse.com/#search=nth-child – TheSisb

在將數據上下文傳遞給句柄之前做你的邏輯，然後檢查句柄if語句中的變量是真還是假。 – MarcoL

我已經通過修改每個助手實現了我自己的解決方案。這是我的新的每個代碼在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 XX}}通過將類=「{{@斑馬}}」在我的div循環在我的模板或者trs。

希望這可以幫助別人！

來源

2014-02-26 19:46:50 TheSisb

如何在handlebar.js表中實現斑馬條紋？

回答

相關問題