Handlebars.js解析对象而不是[Object object]

75

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

有什么建议？谢谢！

编辑：

为了澄清起见，我使用带有把手的ExpressJS进行模板制作。在我的路线中，我有这个：

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

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

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

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

问题是，如果我将其放在console.log中，{{user}}只会[Object object]在源代码中显示，但会出现错误“意外的标识符”。

javascript json handlebars.js

— dzm
source

您必须详细说明“无效”。您是否可以提供相关的代码片段以及对期望内容的描述[Object object]？如果您只是想查看对象的键/值，则需要console.log与调试器或一起使用JSON.stringify。

— 乔纳森·洛诺夫斯基

Console.log也显示[Object object]。我将更新帖子以更好地解释。

— dzm 2012年

169

输出时{{user}}，把手将首先检索user的.toString()值。对于plain Object，默认结果是"[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
});

— 乔纳森·洛诺夫斯基
source

12

它应该是：{{{{json user}}}}，否则将对json字符串进行编码。

— Jim Liu

谢谢，这太完美了。对于Express用户：app.set('view engine', 'hbs'); var Handlebars = require('hbs');

— Oneiros，2015年

4

效果很好。也适用于快车使用者：

var exphbs = require('express-handlebars'); app.engine('handlebars', exphbs({			 			helpers: { 				json: function (context) { 					return JSON.stringify(context); 				} 			} 		}));

— JayChase 2015年

4

或者在渲染时仅包括助手。res.render('index', { var1: 'some value', helpers: { json: function (context) { return JSON.stringify(context); } });

— Derek Soike

1

@acmoune通过网络，从服务器到客户端，必须将对象序列化为数据格式。因此，严格按照原样发送它在内存中是不可能的。但是，您也许可以共享User类型的定义并为客户端重新构造实例user : new User({{{json user}}})。

— 乔纳森·洛诺夫斯基

12

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

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

然后在模板中打印：

{{{user.stringify}}};

— 阮
source

1

上面的答案很棒。在视图中呈现JSON字符串时，我实际上遇到了一个问题，因为我有一个不转义的引号，此答案解决了stackoverflow.com/a/22105906/7998284

— hazelcodes

4

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

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

注意三重冰壶（由吉姆·刘指出）。

— 杰夫·洛里（Jeff Lowery）
source

1

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

您可能需要这样做：

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

— 特里
source

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"
    }
  }
}

— 菲尔·C
source