Question

我试图使用自定义助手设置一个把手模板，但我似乎无法让它工作。块帮助器应该能够像here那样切片我的数据数组。

当我调用我的数组中的每个索引而不使用帮助器我的模板时，它可以正常工作。

这是我的模板

          <script id="template_marcas" type="text/x-handlebars-template">
          {{#datos_marcas}}
            <div class="large-3 small-3 columns marca_item">
              <div class="marca_content">
                <h3>{{img}}</h3>
                <p>{{descp}}</p>
                <a href="{{href}}">Ver descuentos</a>
              </div>
            </div>
          {{/datos_marcas}}
          </script>

我的数据阵列：

var data_marcas = { 
  datos_marcas: [
      {
        "img":"alverto",
        "descp":"Descripción Marta",
        "href":"test"
      },
       {
        "img":"marta",
        "descp":"Descripción Marca",
        "href":"test"
      },
       {
        "img":"marca",
        "descp":"Descripción Marca",
        "href":"test"
      } //etc.....
    ]
  };

这是我正在尝试使用的助手

Handlebars.registerHelper('slice', function(context, block) {
var ret = "",
  offset = parseInt(block.hash.offset) || 0,
  limit = parseInt(block.hash.limit) || 5,
  i = (offset < context.length) ? offset : 0,
  j = ((limit + offset) < context.length) ? (limit + offset) : context.length;

for(i,j; i<j; i++) {
  ret += block(context[i]);
}

  return ret;
});

我找到了here

修改

我正在尝试使用下面的帮助器，也许我调用它的方式有问题。

          <script id="template_marcas" type="text/x-handlebars-template">
          {{#slice datos_marcas offset="1" limit="5"}}
            <div class="large-3 small-3 columns marca_item">
              <div class="marca_content">
                <h3>{{img}}</h3>
                <p>{{descp}}</p>
                <a href="{{href}}">Ver descuentos</a>
              </div>
            </div>
          {{/slice}}
          </script>

Answer 1

您找到的slice帮助程序中存在错误。

而不是block(context[i])应该有block.fn(context[i])

这是一个有效的jsfiddle

Answer 2

我对此进行了升级，因此您可以根据ECMA Array.slice使用负偏移从数组末尾剥离。

Handlebars.registerHelper('slice', function (context, options) {

  var ret = "",
    offset = parseInt(options.hash.offset, 10) || 0,
    limit = parseInt(options.hash.limit, 10) || 5,
    i,
    j;

  if (offset < 0) {
    i = (-offset < context.length) ? context.length - (-offset) : 0;
  } else {
    i = (offset < context.length) ? offset : 0;
  }

  j = ((limit + i) < context.length) ? (limit + i) : context.length;

  for (i, j; i < j; i++) {
    ret += options.fn(context[i]);
  }

  return ret;
});

See the fiddle.

handlebars.js模板与自定义帮助器切片数据数组

2 个答案: