84

我正在使用 Handlebars 模板，并且 JSON 数据已经在 [Object object] 中表示，如何在 Handlebars 之外解析这些数据？例如，我试图通过把手标签在页面上填充一个 JavaScript 变量，但这不起作用。

有什么建议么？谢谢！

编辑：

为了澄清，我使用 ExpressJS w/ Handlebars 进行模板。在我的路线中，我有这个：

var user = {}
user = {'id' : 123, 'name' : 'First Name'}

res.render('index', {user : user});

然后在我的 index.hbs 模板中，我现在有了一个{{user}}对象。我可以{{#each}}用来遍历对象就好了。但是，我也在使用 Backbonejs，我想将此数据传递给视图，例如：

myView = new myView({user : {{user}});

问题是，如果我将它放在 console.log 中，它{{user}}只会显示[Object object]在源代码中，我会收到错误消息“意外标识符”。

4

7 回答 7

180

输出 时{{user}}，Handlebars 将首先检索user'.toString()值。对于 plain Objects，默认结果是"[object Object]"你看到的。

为了获得更有用的东西，您要么想要显示对象的特定属性：

{{user.id}}
{{user.name}}

或者，您可以使用/定义帮助器以不同方式格式化对象：

Handlebars.registerHelper('json', function(context) {
    return JSON.stringify(context);
});

myView = new myView({
    user : {{{json user}}} // note triple brackets to disable HTML encoding
});
于 2012-04-19T17:13:10.843 回答
13

您可以简单地将 JSON字符串化：

var user = {}
user = {'id' : 123, 'name' : 'First Name'};
// for print
user.stringify = JSON.stringify(user);

然后在模板打印中： 

{{{user.stringify}}};
于 2016-05-06T04:28:36.213 回答
7

我在 node-js 中使用服务器端模板，但这也可能适用于客户端。我在节点中注册了Jonathan的 json 助手。在我的处理程序中，我通过 res.locals 添加上下文（例如地址簿）。然后我可以在客户端存储上下文变量，如下所示：

<script>
  {{#if addressBook}}
  console.log("addressBook:", {{{json addressBook}}});
  window.addressBook = {{{json addressBook}}};
  {{/if}}
</script>

注意三重卷曲（正如Jim Liu所指出的）。

于 2015-02-13T19:44:24.303 回答
1

您试图在{{ }}无效的 JSON 对象中传递模板语法。

您可能需要这样做：

myView = new myView({ user : user });

于 2012-04-19T17:08:14.467 回答
0

如果您想更好地控制输出格式，您可以编写自己的帮助程序。这个有一个递归函数来遍历嵌套对象。

  Handlebars.registerHelper('objToList', function(context) {
    function toList(obj, indent) {
      var res=""
      for (var k in obj) { 
          if (obj[k] instanceof Object) {
              res=res+k+"\n"+toList(obj[k], ("   " + indent)) ;
          }
          else{
              res=res+indent+k+" : "+obj[k]+"\n";
          }
      }
      return res;
    }    
    return toList(context,"");
  });

我们将把手用于电子邮件模板，事实证明这对以下用户很有用

{
  "user": {
    "id": 123,
    "name": "First Name",
    "account": {
      "bank": "Wells Fargo",
      "sort code": " 123-456"
    }
  }
}
于 2020-04-23T06:00:50.697 回答
0

在节点路由器中 - 将响应对象字符串化。见下一行。

 response.render("view", {responseObject:JSON.stringify(object)});

在 HTML Script 标记中 - 用户模板文字（模板字符串）并使用 JSON.parse。

const json= `{{{responseObject}}}`;
const str = JSON.parse(json);

像魅力一样工作！

于 2021-03-11T09:34:56.103 回答
0

您可以在 Handlebars 模板中呈现列表或对象的键/值，如下所示：

{{#each the_object}}
  {{@key}}: {{this}}
{{/each}}
于 2022-02-22T08:00:26.780 回答