Question

Handlebars无法读取我将其作为上下文发送的JSON对象。

这是调用Mustache模板并为其提供上下文的函数：

render: function() {
  var source = $("#round").html();
  var template = Handlebars.compile(source);
  var context = JSON.stringify(this.model);
  console.log(context);
  var html = template(context);
  $(this.el).html(html);
  return this;
},

这是我传递的JSON对象：

{"result":0,"friend1":{"firstName":"Ape","lastName":"Head","fbID":329018,"kScore":99,"profilePic":""},"friend2":{"firstName":"Ape","lastName":"Hands","fbID":32,"kScore":70,"profilePic":""}}

以下是Handlebars模板：

  <script id="round" type="text/x-handlebars-template">
    {{#with friend1}}
    <h2>{{firstName}} {{lastName}}</h2>
    {{/with}}
  </script>

我收到以下错误：

Uncaught TypeError: Cannot read property 'firstName' of undefined

Answer 1

替换此功能：

render: function() {
  var source = $("#round").html();
  var template = Handlebars.compile(source);
  var context = JSON.stringify(this.model);
  console.log(context);
  var html = template(context);
  $(this.el).html(html);
  return this;
},

使用：

render: function() {
  var source = $("#round").html();
  var template = Handlebars.compile(source);
  var context = JSON.parse(this.model.toJSON);
  console.log(context);
  var html = template(context);
  $(this.el).html(html);
  return this;
},

在这种情况下，

template应该使用javascript对象。 JSON.stringify返回JSON对象的字符串表示形式，而不是javascript对象。但你真正想要的是模型的属性。所以你可以通过toJSON或JSON.stringify（this.model）访问它们，但是你需要将它们转换回Javascript对象。

Answer 2

只需在模板调用中使用.toJSON()，即可将模型属性转换为手柄所需的json对象：

template(this.model.toJSON());

Answer 3

尝试：

var html = template(this.attributes);

Backbone模型对象的attributes属性包含数据的JS对象表示。直接访问它并不是很好的做法，但在这种情况下，它可能是最简单的事情，而不是尝试通过JSON往返数据。

Answer 4

我必须同意Dan的答案，以最快的方式做到这一点。如果列表中您可能需要id来捕获点击次数，您甚至可以执行此操作

<script id="round" type="text/x-handlebars-template">
{{#each friends}}
<li id="{{ this.id }}" >{{this.attributes.firstName}} {{this.attributes.lastName}}</li>
{{/each}}
</script>

Handlebars模板无法从Backbone处理JSON

4 个答案: