javascript 关于 Backbone.js 和 Handlebars.js 的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7344982/
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
Questions on Backbone.js with Handlebars.js
提问by ericbae
My backbone.js app with Handelbars does the following.
我的带有 Handelbars 的backbone.js 应用程序执行以下操作。
- setup a model, its collection, view and router.
- at the start, get a list of articles from the server and render it using the view via Handlebars.js template.
- 设置一个模型、它的集合、视图和路由器。
- 在开始时，从服务器获取文章列表并通过 Handlebars.js 模板使用视图呈现它。
The code is below.
代码如下。
(function ($)
{
// model for each article
var Article = Backbone.Model.extend({});
// collection for articles
var ArticleCollection = Backbone.Collection.extend({
model: Article
});
// view for listing articles
var ArticleListView = Backbone.View.extend({
el: $('#main'),
render: function(){
var js = JSON.parse(JSON.stringify(this.model.toJSON()));
var template = Handlebars.compile($("#articles_hb").html());
$(this.el).html(template(js[0]));
return this;
}
});
// main app
var ArticleApp = Backbone.Router.extend({
_index: null,
_articles: null,
// setup routes
routes: {
"" : "index"
},
index: function() {
this._index.render();
},
initialize: function() {
var ws = this;
if( this._index == null ) {
$.get('blogs/articles', function(data) {
var rep_data = JSON.parse(data);
ws._articles = new ArticleCollection(rep_data);
ws._index = new ArticleListView({model: ws._articles});
Backbone.history.loadUrl();
});
return this;
}
return this;
}
});
articleApp = new ArticleApp();
})(jQuery);
Handlebars.js template is
Handlebars.js 模板是
<script id="articles_hb" type="text/x-handlebars-template">
{{#articles}}
{{title}}
{{/articles}}
</script>
The above code works fine and it prints article titles. However, my question is
上面的代码工作正常，它打印文章标题。但是，我的问题是
When passing context to Handlebars.js template, I am currently doing
$(this.el).html(template(js[0])). Is this the right way? When I do just "js" instead of js[0], the JSON object has leading and ending square brackets. Hence it recognizes as a array object of JSON object. So I had to js[0]. But I feel like it isn't a proper solution.When I first create the "View", I am creating it like below.
ws._index = new ArticleListView({model: ws._articles});
将上下文传递给 Handlebars.js 模板时，我目前正在执行
$(this.el).html(template(js[0])). 这是正确的方法吗？当我只使用“js”而不是 js[0] 时，JSON 对象具有前导和结束方括号。因此它被识别为 JSON 对象的数组对象。所以我不得不js[0]。但我觉得这不是一个合适的解决方案。当我第一次创建“视图”时，我正在创建它，如下所示。
ws._index = new ArticleListView({model: ws._articles});
But in my case, I should do
但就我而言，我应该做
ws._index = new ArticleListView({collection: ws._articles});
Shouldn't I? (I was following a tutorial btw). Or does this matter? I tried both, and it didn't seem to make much difference.
我不应该吗？（顺便说一句，我正在学习教程）。或者这有关系吗？我两个都试了，好像没什么区别。
Thanks in advance.
提前致谢。
回答by timDunham
It seems like you are creating a view for a collection so you shouldinitialize your view using collectioninstead of model.
看起来您正在为集合创建视图，因此您应该使用collection而不是model.
As far as handlebars, I haven't used it a lot but I think you want to do something like this:
至于车把，我没有经常使用它，但我认为你想做这样的事情：
var ArticleListView = Backbone.View.extend({
el: $('#main'),
render: function(){
var js = this.collection.toJSON();
var template = Handlebars.compile($("#articles_hb").html());
$(this.el).html(template({articles: js}));
return this;
}
});
and then use something like this for the template
然后在模板中使用这样的东西
{{#each articles}}
{{this.title}}
{{/each}}
p.s. the line
JSON.parse(JSON.stringify(this.model.toJSON()))is equivalent to this.model.toJSON()
ps 该行
JSON.parse(JSON.stringify(this.model.toJSON()))相当于this.model.toJSON()
Hope this helps
希望这可以帮助
回答by Kristofer Joseph
var ArticleListView = Backbone.View.extend({
initialize: function(){
this.template = Handlebars.compile($('#articles_hb').html());
},
render: function(){
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
/////////////////////////////////////
/////////////////////////////////////
ws._index = new ArticleListView({model: ws._articles});
