Handlebars.js 不喜欢前面的方括号答案

【问题标题】：Handlebars.js doesn't like square brackets in the frontHandlebars.js 不喜欢前面的方括号
【发布时间】：2011-09-08 06:44:36
【问题描述】：

我正在使用 PHP 后端、Backbone.js 和 Handlebars.js。我的javascript请求数据，JSON数据返回成功（json_encode）。

当我将此 JSON 数据提供给车把模板时，它没有显示。我意识到我的 JSON 对象前面和后面的方括号被 Handlebars.js“不喜欢”并且没有被显示。看看下面的代码。

var ArticleListView = Backbone.View.extend(
{
  el: $('#main'),
  render: function()
  {
    var template = Handlebars.compile($("#articles_hb").html());
    $(this.el).html(template([{"articles":[{"title" : "1"}, {"title" : "2"}]}]));
    return this;    
  }
});

现在，如果我把括号去掉，它就可以正常工作了。这是怎么回事？为什么首先有方括号？我该如何摆脱它们？

【问题讨论】：

标签： javascript backbone.js handlebars.js

【解决方案1】：

调用 Handlebars 循环通过集合的输出是完全合理的。此外，对于视图中的数据处理而言，数组并不是一个糟糕的设计决策。

Handlebars 具有处理数字或符号标识符的特殊语法as described here。所以，更正确的答案是 Handlebars 可以像这样访问模板中的数组：

{{people.attributes.[0]}} // akin to people.attributes[0]
{{people.attributes.[1]}} // akin to people.attributes[1]

输入：mails:[{headers: {subject: ["Hello Darling", "...another"]}}, ...more ]

<ul>
  {{#each mails}}
    <li>.
        {{headers.subject.[0]}}
    </li>
  {{/each}}
</ul>

【讨论】：

【解决方案2】：

Handlebars 想要一个上下文对象，因为它使用上下文作为模板值的简单查找表。所以你需要将一个对象（{ ... }）传递给template()，而不是一个数组（[ ... ]）。

有人会给你一个包含你需要的上下文对象的单元素数组。要么修复生成 JSON 的 PHP 以在没有数组包装器的情况下发送 JSON 化对象（PHP 术语中的关联数组），要么在客户端代码中使用类似这样的内容剥离数组：

$(this.el).html(template(context[0]));

如果你有这个文字代码：

$(this.el).html(template([{"articles":[{"title" : "1"}, {"title" : "2"}]}]));

在您的 JavaScript 文件中，您必须了解生成该代码的内容并对其进行修复。如果您确实在 Backbone 视图中嵌入了类似的文字数据，那么您可能没有正确使用 Backbone，您的模板的数据可能来自 Backbone 模型。

如果您从 Backbone 模型获取 JSON，那么我猜您是在集合（返回数组）上调用 toJSON，而不是 toJSON 应该为您提供 JavaScript 的单个模型对象。

【讨论】：

感谢您的回答。这很有帮助。在您的最后一段中，您说，“在集合上调用 toJSON() 将返回一个数组。如果是这种情况，如果我想将该集合传递给车把模板，我会再次使用相同的方括号吗？
@ebae：您需要为数组命名，template({stuff: stuffs.toJSON()})。
酷。顺便提一句。我做对了吗？我的意思是，我必须一直给数组名称吗？我见过的其他教程和示例没有这样做。那我有什么不同呢？
@ebae：您需要在顶层命名，否则将无法引用数组。如果您的 toJSON 返回一个对象，那么您可以使用 template(stuff.toJSON) 来直接访问模板中 stuff 的属性。