three way to create your model:
Person = Backbone.Model.extend({})
Person = Backbone.Model.extend({
defaults:{
name:"";//Model arrow undefined data
create:new Date() //here arrow put PHP function
}
});
Person = Backbone.Model.extend({
defaults:function(){
return { name:""; //Model arrow undefined data
create:new Date()
}
}
});Read and Write:
var person = new Person({ name:”Sandy”,age:”12″});
person.get(“name”);//” Sandy”
person.set({name:”Anna”,age:”12″});//overwrite it
Create Simple View
PersonView = Backbone.View.extend({
render:function(){
var person = “<p>” + this.model.get(“user”) + “</p>”;
$(this.el).html(person);
}
});
“this.el” meaning: every View Model create a Page Scope, el means the root tag<div></div>,
Get Model data Add into HTML page
var personView = new PersonView({
model:person;
})
personView.render();
console.log(personView.el);//check the el
Get Data from the server(RESTful way)
var Person = Backbone.Model.extend({urlRoot:”/person”}); //point to the data sourse
var person = new Person({id:1}); //point to your object
person.fetch();//get /person/1
person.save();//put /person/1
var newPerson=new PersonModel(); //create a new object
newPerson.set({name:”Sandy Zhang”}); // give the an name
newPerson.save(); // insert into /person
newPerson.get(“id”); //2
newPerson.destroy();// Delete /person/2
Create Better View
var PersonView = Backbone.View.extend({
tagName:”article”,
id:”personOne”;
class:”person”,
attributes:{title:this.model.get(“name”)},
render:function(){
var person=”<p>” + this.model.get(“name”)+”</p>”;
$(this.el).html(person);
}
});
this will render html sourse:
<article id=”personOne” class = “person” title=”Sandy Zhang”>
<p>Sandy Zhang</p>
</article>
Cache of the jQuery object
$(“#personOne”).html();
in Backbone.js: $(this.el).html(); or better way : this.$el.html()
el is generated for the cache of jQuery object, so that it can be used repeatedly without fear of generating multiple instances of the jQuery object.
Built-in template engine(underscore template)
use render() seems not elegant ,now we use underscore template
var PersonView = Backbone.View.extend({
tagName:”article”,
id:”personOne”;
class:”person”,
attributes:{title:this.model.get(“name”)},
template: _.template(‘<p><%= name %></p>’),
render:function(){
data = this.model.toJSON();
$(this.el).html(template(data));
}
}); // Cool! looking better
Track your instance
var person = new Person({name:”sandy”}); //create a instance
person.on(“change”,function(){
alert(“Something changed on ” + this.get(“name”) );
});
person.on(“change:age”,function(){
alert(this.get(“name”) +”,Your age has been changed ” );
});
Change data to JSON format
var person = new Person({id:1});
console.log(person.toJSON());
//or
console.log(JSON.stringify(person));
Now Add View event
var PersonView = Backbone.View.extend({
tagName:”article”,
id:”personOne”;
class:”person”,
attributes:{title:this.model.get(“name”)},
template: _.template(‘<p><%= name %></p>’),
render:function(){
data = this.model.toJSON();
this.$el.html(template(data));
},
events:{ “mouseover” :”showMore”,},
showMore:function(){…….},
});
Advance Level
1.Server <= (get) model (data) => view (rendering) => DOM
var PersonView = Backbone.View.extend({
input:_.template(‘<input type=”text”><%= name%></input>’),
submit: _.template(‘<button type=”submit”>Change Name</button>’),
render: function(){
data = this.model.toJSON();
this.$el.html(input(data)).html(submit);
}
});
Now we can change name now, the question is how do you know the model data has changed? This needs to view it through the event.
var PersonView = Backbone.View.extend({
events:{“submit button”:”updateName”}
updataName:function(){
newName = $(this).val(); // this=button!
if(newName !== this.model.get(‘name’)){
this.model.set({name:newName}); }
else{ return;}
}
});
Well…it did work, but the problem is : should belong Model processing logic put in the View now. So we reconstruct it.
var PersonView = Backbone.View.extend({
events:{“submit button”:”updateName”}
updateName:function(){
newName = $(this).val();
this.model.updateName(newName);
}
});
var Person = Backbone.Model.extend({
updateName: function(newName){
this.set({name:newName});
this.save(); // tell server to save the new name into database
}
})
2.The above, we pass the parameter value changes transferred to the Model, and then further processed by the Model it wants to do.
Now, the loop model like this:
Server <= (updated) model (proceed) <= (notification) view <= (user interaction) DOM
If the data model changes, how to notice the view? You might immediately think of the render method can be performed immediately after the completion notification view:
var PersonView = Backbone.View.extend({
updateName:function(){
newName = $(this).val();
this.model.updateName(newName);
this.render();
}
});
Ah good idea …… but it is not always useful, because the value of the model could be changed elsewhere, such as in another view . So, how to notify the specified view response to the model changes?
So, use listenTo() function
var PersonView = Backbone.View.extend({
initialize:function(){
this.listenTo(this.model,”change”,this.render);
//this.model.on(“change”,this.render,this);
}
});
3. collection
a)Collect multiple model data
When there was more and more instances , in order to facilitate the processing of them, we usually think of them together with the array. Backbone.js Collection module provides a simplified way to help us:
var Person = Backbone.Collection.extend({ model:person });
var person.add{[{name:”Sandy Zhang”, id:1},{name:”Anna li”,id:2}]};
person.length //=>2
person.get(2) // => { name : “Anna li”,id:2}
person.at(0) //=>{ name:”Sandy Zhang”, id:1}
HTML5 Push State API
Backbone.history.start({pushState: true});
var App = new (Backbone.Router.extend({
initialize: function() {
this.person = new person();
this.personView = new personView({collection: this.person});
$(“#app”).append(this.personView.el);
},
index: function() {
this.person.fetch();
},
…
start: function() {
Backbone.history.start({pushState: true});
}
}));
$(function() { App.start(); });
Sandy | Full stack Web developer 