在 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哈希的bult-in助手，但是您可以编写自己的助手来返回哈希的内容，或者您可以使用"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

继续休伯特 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 渲染引擎才能更好地理解当情况发生变化时要重绘的内容。