Backbone setup your Model

This could put on external file or you could put in the body area, test in browser, you should see things like this

backbone1

<script type=”text/javascript”>
           //create a new model named person, if you work with PHP framework like zend framework just use the model name you create in your php files
Person = Backbone.Model.extend({
initialize: function(){
console.log(“Object is created”);

//this is for track the value weather it changed or not
this.on(“change:name”,function(){
alert(“Name attribute value has been changed”);
});
this.on(“change:age”,function(){
alert(“Age attribute value has been changed”);
});
},
defaults:{
name:”Sandy”,
gender:”Female”,
age:”20″
},
//create a customer function
getPersonInfo:function(){
document.write(“<h2>Name is: ” +this.get(‘name’)+”,Gender is : “+this.get(‘gender’)+”,Age is:”+this.get(‘age’) +”</h2>”);
}
});
//create an object name sandy
var sandy = new Person();
document.write(sandy.get(‘name’)+”<br/>”);
document.write(sandy.get(‘gender’)+”<br/>”);
document.write(sandy.get(‘age’)+”<br/>”);
//create an object name simon and give different value to name,gender, age
var simon = new Person({name:”simon”,gender:”male”,age:”12″});
document.write(simon.get(‘name’)+”<br/>”);
document.write(simon.get(‘gender’)+”<br/>”);
document.write(simon.get(‘age’));
//call the customer function
sandy.getPersonInfo();
//this set function goes to overide the name then will have alert window
sandy.set({name:”SandyZhang”});
sandy.set({age:”30″});
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s