需要 Handlebars.js 来渲染对象数据而不是“[Object object]”

IT技术 javascript json handlebars.js
2021-03-15 08:36:09

我正在使用 Handlebars 模板并且 JSON 数据已经在 [Object object] 中表示，我如何在 Handlebars 之外解析这些数据？例如，我试图通过 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]在源代码中显示，我得到一个错误，“意外的标识符”。

6个回答

输出时{{user}}，Handlebars 将首先检索user的.toString()值。对于普通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
});
或者在渲染时只包含助手。 res.render('index', { var1: 'some value', helpers: { json: function (context) { return JSON.stringify(context); } });
2021-04-27 08:36:09
效果很好。也适用于express-handlebars用户：var exphbs = require('express-handlebars'); app.engine('handlebars', exphbs({ helpers: { json: function (context) { return JSON.stringify(context); } } }));
2021-05-01 08:36:09
@acmoune 通过网络，从服务器到客户端，对象必须被序列化为数据格式。所以在内存中发送它是不可能的。但是，您可以共享User类型的定义并为客户端重建实例 – user : new User({{{json user}}}).
2021-05-01 08:36:09
谢谢，这是完美的。对于 Express 用户：app.set('view engine', 'hbs'); var Handlebars = require('hbs');
2021-05-06 08:36:09
它应该是：{{{json user}}}，否则json字符串将被编码。
2021-05-07 08:36:09

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

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

然后在模板中打印： 

{{{user.stringify}}};
楼上的回答很精彩。我在视图中渲染 JSON 字符串时实际上遇到了一个问题，因为我有一个未转义的引号，这个答案解决了stackoverflow.com/a/22105906/7998284
2021-05-10 08:36:09

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

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

注意三重curl（正如Jim Liu指出的那样）。

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

您可能需要这样做：

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

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

  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"
    }
  }
}
其它你可能感兴趣的问题
上一篇目前哪些浏览器支持 JavaScript 的“let”关键字？ 下一篇Cloud Firestore：使用动态键更新嵌套对象中的字段