JSFiddle - React, Tailwind, and code Playground
JavaScript
//model
var Thing = Backbone.Model.extend({
});
//view
var ThingView = Backbone.View.extend({
el: $('body'),
template: _.template('<h3><%= title %></h3> <a href="#/posts/<%= id %>">Post <%= id %></a>'),
render: function(){
var attributes = this.model.toJSON();
this.$el.append(this.template(attributes));
console.log(attributes);
}
});
var DetailView = Backbone.View.extend({
el: $('body'),
template: _.template('this is detailview for <br><%= id %> <br>price <%= price %> <a href="index.htm">back</a>'),
render: function(id){
var attributes = this.model.toJSON();
this.$el.append(this.template(attributes));
console.log(attributes);
}
});
//collection
var ThingsList = Backbone.Collection.extend({
//references model
model: Thing
});
//model data
var things = [
{ title: "Macbook Air", price: 799, id: 1 },
{ title: "Macbook Pro", price: 999, id: 2 },
{ title: "The new iPad", price: 399, id: 3 },
{ title: "Magic Mouse", price: 50, id: 4 },
{ title: "Cinema Display", price: 799, id: 5 }
];
//instantiate collection
var thingsList = new ThingsList(things);
//collectionView
var ThingsListView = Backbone.View.extend({
el: $('body'),
render: function(){
_.each(this.collection.models, function (things) {
this.renderThing(things);
}, this);
},
//references View
renderThing: function(things) {
var thingView = new ThingView({ model: things });
this.$el.append(thingView.render());
}
});
/* router section */
var AppRouter = Backbone.Router.extend({
routes: {
"posts/:id": "getPost",
"*actions": "defaultRoute" // matches http://example.com/#anything-here
}
});
// Initiate the router
var app_router = new AppRouter;
app_router.on('route:getPost', function (id) {
this.item = thingsList.get(id);
console.log(this.item);
...