This example is from this site
main.js
// Models
var Wine = Backbone.Model.extend();
var WineCollection = Backbone.Collection.extend({
model:Wine,
url:"api/wines"
});
// Views
var WineListView = Backbone.View.extend({
tagName:'ul',
initialize:function () {
this.model.bind("reset", this.render, this);
},
render:function (eventName) {
alert("WineListView");
_.each(this.model.models, function (wine) {
this.$el.append(new WineListItemView({model:wine}).render().el);
}, this);
return this;
}
});
var WineListItemView = Backbone.View.extend({
tagName:"li",
template:_.template($('#tpl-wine-list-item').html()),
render:function (eventName) {
alert("hi" )
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var WineView = Backbone.View.extend({
tagName:'div',
template:_.template($('#tpl-wine-details').html()),
render:function (eventName) {
alert("WineView" );
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
// Router
var AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
list:function () {
this.wineList = new WineCollection();
this.wineListView = new WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
this.wine = this.wineList.get(id);
this.wineView = new WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
var app = new AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<!--<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>-->
</div>
<!-- Templates -->
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
</div>
<div class="form-right-col">
<!-- <img height="300" src="../pics/<%= picture %>"/>-->
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="js/main.js"></script>
</body>
</html>
In main.js If i manually add models to collections it works fine. When i fetch from server using this.wineList.fetch(); and if I pass it to render function collection is empty. But if i give alert("something") in that function collection wont be empty. this.wineList.fetch() fetches the data from server and it doesnt call set function on collection. What would be the problem??
In back-end I am using node.js. Front end I'm using backbone.js. I'm new to backbone technology. Please tell me what am i missing.
Just make sure your api/wines has no syntax errors, all the attributes should be separated by commas.
I have tested your code and its working fine.
in your main.js
(function ($) {
// Add your Models/ Collections/ Views/ Routers
} (jQuery));