带有自定义帮助器的 handlebars.js 模板来切片数据数组答案

【问题标题】：handlebars.js template with custom helper to slice data array带有自定义帮助器的 handlebars.js 模板来切片数据数组
【发布时间】：2014-10-23 13:34:29
【问题描述】：

我正在尝试使用自定义助手设置车把模板，但我似乎无法让它工作。块助手应该能够像 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>

【问题讨论】：

使用 {{slice }} 时遇到什么错误
我收到“Uncaught TypeError: object is not a function”错误。

标签： javascript handlebars.js

【解决方案1】：

您找到的slice 助手有错误。

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

这是一个有效的jsfiddle

【讨论】：

我这样做了，现在我为我调用的每个索引都得到一个“未定义”，我正在调用上面的帮助器，
我知道。正如我所写，它不会使该助手正常工作，它只是修复了一个异常。
你能告诉我我在模板中调用助手的方式有什么问题吗？
好的。我在 slice 函数中发现了一个错误。我更新了一个答案。现在一切似乎都正常了
太棒了！我还提出了一个对 github 存储库进行修复的拉取请求，你得到了那个损坏的助手，所以人们将来不会遇到这个错误

【解决方案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.

【讨论】：