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 things = thing.fetch({
success: function() {
console.log(that.collection.toJSON());
},
error: function() {
console.log('Failed to fetch!');
}
});
});
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,
url: "data/data.json",
parse: function(response) {
return response.results;
},
sync: function(method, model, options) {
var that = this;
var params = _.extend({
type: 'GET',
dataType: 'jsonp',
url: that.url,
processData: false
}, options);
return $.ajax(params);
}
});
//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) {
...