javascript 把手模板无法处理来自 Backbone 的 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7084583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handlebars Template not able to process JSON from Backbone
提问by egidra
Handlebars is unable to read the JSON object that I am sending it as context.
Handlebars 无法读取我作为上下文发送的 JSON 对象。
Here is the function that makes the call to the Mustache template and gives it the context:
这是调用 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;
},
Here is the JSON object that I am passing it:
这是我传递的 JSON 对象：
{"result":0,"friend1":{"firstName":"Ape","lastName":"Head","fbID":329018,"kScore":99,"profilePic":""},"friend2":{"firstName":"Ape","lastName":"Hands","fbID":32,"kScore":70,"profilePic":""}}
Here is the Handlebars template:
这是把手模板：
<script id="round" type="text/x-handlebars-template">
{{#with friend1}}
<h2>{{firstName}} {{lastName}}</h2>
{{/with}}
</script>
I get the following error:
我收到以下错误：
Uncaught TypeError: Cannot read property 'firstName' of undefined
回答by Joe
replace this function:
替换此功能：
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;
},
with:
和：
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;
},
templateshould take a javascript object in this case. JSON.stringify returns a string representation of a JSON object, not a javascript object. But what you really want are the model's attributes. So you can access those through toJSON or JSON.stringify(this.model), but then you need to convert those back into a Javascript Object.
template在这种情况下应该采用 javascript 对象。JSON.stringify 返回 JSON 对象的字符串表示，而不是 javascript 对象。但是您真正想要的是模型的属性。因此，您可以通过 toJSON 或 JSON.stringify(this.model) 访问它们，但随后您需要将它们转换回 Javascript 对象。
回答by Greg Funtusov
Just use .toJSON()in the template call, that will transform the model attributes to a json object expected by handlebars:
只需.toJSON()在模板调用中使用，这会将模型属性转换为车把所需的 json 对象：
template(this.model.toJSON());
回答by Dan Ray
Try:
尝试：
var html = template(this.attributes);
The attributesproperty of the Backbone model object contains the JS object representation of the data. It's not great practice to access it directly like that, but in this case it might be the simplest thing, rather than trying to roundtrip the data through JSON.
attributesBackbone 模型对象的属性包含数据的 JS 对象表示。像这样直接访问它不是很好的做法，但在这种情况下，它可能是最简单的事情，而不是尝试通过 JSON 来回传输数据。
回答by Vincent Cheong
I would have to agree with Dan's answer for the fastest way to do this. In the case of a list where you might need the id to capture clicks, you can even do this
我必须同意丹的回答，以最快的方式做到这一点。在列表的情况下，您可能需要 id 来捕获点击次数，您甚至可以这样做
<script id="round" type="text/x-handlebars-template">
{{#each friends}}
<li id="{{ this.id }}" >{{this.attributes.firstName}} {{this.attributes.lastName}}</li>
{{/each}}
</script>
