自定義車把幫手

Question

我有返回JSON的函數：

  Template.mainmenu.menuitem = function() {
    var jsonObj = { items: [
        { url: "http://google.com", title: "google" },
        { url: "http://stackoverflow.com", title: "stackoverflow" },
      ] };

    return jsonObj;
  };

我有自定義車把幫手：

  Handlebars.registerHelper('woodoo', function(context, options) {
    var ret = "";
    for(var i = 0, j = context.length; i < j; i++) {      
      ret = ret + options.fn(context[i]);
      alert(ret);
    }

    return ret;
  });

這是模板：

<template name="mainmenu">
  {{#woodoo menuitem}}
    <a href="{{url}}">{{title}}</a>
  {{/woodoo}}

HTML頁面正在呈現，沒有錯誤，但是我看不到URL，也沒有任何警告消息。 為什么以及如何解決？

Answer 1

看起來，在您的車把幫助器函數中， context.length將返回undefined ，因此沒有什么要提醒的。

您希望for循環停止在items鍵內的鍵長處。 一種簡短的編寫方法是Object.keys(context.items).length 。 同樣，您需要迭代的鍵在context.items ：

Handlebars.registerHelper('woodoo', function(context, options) {
  var ret = "";
  for(var i = 0, j = Object.keys(context.items).length; i < j; i++) {
    ret = ret + options.fn(context.items[i]);
  alert(ret);
}
  return ret;
});

Answer 2

根據列出的Template.mainmenu.menuitem函數，您不需要自定義的Handlebars幫助器。 您可以像這樣使用內置的#each幫助器：

<template name="mainmenu">
  {{#each menuitem.items}}
    <a href="{{url}}">{{title}}</a>
  {{/each}}
</template>