Model not rendering in Backbone.js
I am building a simple mobile javascript application, with Backbone.js and Forge. What I'm trying to do is have a Suggestion model and a Category collection of those models, and create one suggestion and have that render out in the view using an underscore template. But that suggestion is not rendering out. Here's the main.js file:
(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));
And the 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>
I am really sorry if I am missing out on a basic feature. Thank you.
It's more common to pass el to view constructors rather than to extend() . As for the rest of it, you probably want something more like the following. Also, your code is missing tons of semicolons and commas.
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
} );
上一篇: 使用JavaScript将HTML（使用Javascript）转换为PDF
下一篇: 模型不在Backbone.js中渲染