Question

我发现我们可以在#each帮助器中利用@index，但这似乎没什么帮助。

我正在尝试在一些车把模板中实现可选的斑马条纹。

{#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'

是否可以做这样的事情？

Answer 1

我通过修改每个帮助程序实现了我自己的解决方案。这是我在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}}循环中使用它，方法是将class =“{{@ zebra}}”放在我的div或trs上。

希望这有助于其他人！

如何在handlebar.js表中实现Zebra Striping？

1 个答案: