javascript - 遍历 HTML 模板中的 javascript 哈希

Question

我有返回哈希的js函数：

  Template.mainmenu.menuitem = function() {
    var links = {};
    links["mail"] = "http://some.net";
    links["rss"] = "http://rss.com";
    return links;
  };>

我想在 HTML 模板中迭代这个哈希并创建一组链接。

我试过这段代码：

<template name="mainmenu">
  {{#each menuitem}}  
    {{this}}
  {{/each}}
</template>

但它什么也没返回。如果我将散列更改为数组，一切正常。

如何遍历哈希并构造 html 链接：

<a href="{{this.value}}">{{this.key}}</a>  

Answer 1

我不认为handelbars有用于迭代js哈希的内置助手，但你可以编写自己的助手来返回哈希的内容，或者你可以使用“with”：

{{#with links}}
  <p>{{{mail}}}</p>
  <p>{{{rss}}}</p>
{{/with}}

Answer 2

由于 Meteor 默认包含下划线，您可以使用下划线方法来提取哈希的内容：

Template.mainmenu.menuitem = function() {
    var links = {};
    links["mail"] = "http://some.net";
    links["rss"] = "http://rss.com";
    return _.values(links);
};

Answer 3

要从 Hubert OG 停止的地方继续：

Template.mainmenu.menuitem = function() {
    var links = {};
    links["mail"] = "http://some.net";
    links["rss"] = "http://rss.com";
    return _.map(links, function (value, key) {return {_id: key, key: key, value: value}});
};

拥有一个_id字段也很重要，这样 Meteor 的 Spark 渲染引擎才能更好地理解当事情发生变化时要重绘什么。