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

Question

我正在使用 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}} object。 我可以使用{{#each}}来遍历 object 就好了。 但是，我也在使用 Backbonejs，我想将此数据传递给视图，例如：

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

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

Answer 1

输出{{user}} ，Handlebars 将首先检索user的.toString()值。 对于普通的Object s，它的默认结果是您看到的"[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
});

Answer 2

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

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

然后在模板中打印：

{{{user.stringify}}};

Answer 3

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

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

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

Answer 4

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

您可能需要这样做：

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

Answer 5

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

{{#each the_object}}
  {{@key}}: {{this}}
{{/each}}

Answer 6

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

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

Answer 7

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

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

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

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

像魅力一样工作！

Answer 8

浓缩（我发现是）最有用的答案......

JSON handlebars助手（ 信用）：

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

JSON express-handlebars助手（ 信用和我更新到最新的约定）：

app.engine(
    "handlebars",
    exphbs.engine({
        defaultLayout: "main",
        helpers: {
            json: function (context) { 
                return JSON.stringify(context);
            }
        }
    })
);

然后在模板方面： {{json example}}

Answer 9

只是改善@sajjad 的答案。

添加一个'pre'标签会让它看起来好多了。

<pre>
  {{#each the_object}}
    {{@key}}: {{this}}
  {{/each}}
</pre>