模型不在Backbone.js中渲染
我正在用Backbone.js和Forge构建一个简单的移动JavaScript应用程序。 我想要做的是有一个建议模型和这些模型的类别集合，并创建一个建议，并使用下划线模板在视图中渲染。 但是这个建议并没有被渲染出来。 这里是main.js文件：
(function ($) {
forge.enableDebug();
var Suggestion = Backbone.Model.extend({
urlRoot: function () {
if (this.isNew()){
return "/suggestions"
}
"/suggestions/" + this.id + ".json"
},
defaults: {
id: this.Category.length + 1,
title: "A Suggestion",
description: "You should go suggest something",
ranking: 1,
done: false,
},
initialize: function() {
forge.logging.log('The suggestion model has been initialized')
},
});
var Category = Backbone.Collection.extend({
model: Suggestion,
urlRoot: function(){
'/suggestions'
},
random: function(){
var randomnumber=Math.floor(Math.random()*this.length + 0)
forge.logging.log("just randomized" + randomnumber )
},
initialize: function(){
forge.logging.log("app initiliazed")
//this.fetch();
},
addSuggestions: function(suggestions){
},
}});
Router = Backbone.Router.Extend({
routes:{
"":"index",
"suggestion/:suggestion_id":"Suggestion"
},
index: function(){
category.index();
}
});
SuggestionView = Backbone.View.Extend({
model: Suggestion
el: $('#suggestions')
tagName: "div",
className: "suggestion"
template: _.template($("#SuggestionTemplate").html())
render: function(){
$(this.el).html(template(this.model.toJSON()));
},
events:{
"tap li": "DetailedView"
},
initialize: function(){
forge.logging.log("rendering suggestions")
this.render();
}
});
DetailedView = Backbone.View.Extend({
model: Suggestion
template: _.template($("#DetailedTemplate").html)
render: function(){
this.$el.html(template(this.model.toJSON))
}
});
CategoryView = Backbone.View.Extend({
el:$("#main")
tagname: "div",
initialize: function(){
forge.logging.log("rendering Suggestions")
this.render();
},
render: function(){
this.Suggestions.each(this.addOne)
}
addOne: function(suggestion){
var view = new SuggestionView
this.$el.append(view.render().el)
}
});
var suggestion1 = new Suggestion()
suggestion1.set(title:"this")
var category = new Category();
var router = new Router();
var categoryView = new CategoryView();
} (jQuery));
和index.html：
<!DOCTYPE html>
<html>
<head>
<title>Just The Best</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script data-main="scripts/main" src="js/require.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="https://trigger.io/catalyst/target/target-script-min.js#47DC7BF1-5D55-4549-8B64-216CA27A73FF"></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div data-role="page">
<div id="#main">
</div>
</div>
<script type="text/html" id="SuggestionTemplate">
//<div class="suggestion">
<h2>Suggestion</h2>
<h3><%=Suggestion.title%></h3>
//</div>
</script>
</body>
如果我错过了基本功能，我真的很抱歉。 谢谢。
传递el来查看构造函数而不是extend()更常见。 至于其余的部分，你可能想要更类似于以下的东西。 另外，你的代码缺少大量的分号和逗号。
CategoryView = Backbone.View.Extend( {
// ...
render : function () {
this.collection.each( _.bind( this.addOne, this ) );
},
addOne : function( suggestion ) {
var view = new SuggestionView( { model : suggestion } );
this.$el.append( view.render().el );
}
} );
var category = new Category( [
{ title : "this" }
] );
var router = new Router();
var categoryView = new CategoryView( {
collection : category
} );