自定义车把帮手

时间:2013-10-10 13:38:22

标签: javascript meteor handlebars.js

我有返回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页面呈现没有错误,但我看不到网址,也没有任何提醒消息。为什么以及如何解决?

2 个答案:

答案 0 :(得分:2)

看起来,在你的把手辅助函数中,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;
});

答案 1 :(得分:1)

根据您列出的Template.mainmenu.menuitem函数,您不需要自定义Handlebars帮助程序。你可以像这样使用内置的#each助手:

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