[Backbone]2. More detail in Models
2014-08-01 19:10
375 查看
Our Appointment model doesn't seem too useful yet. Add two default attributes,
While messing around in the console, you've discovered a strange bug. Every new
This is because
To fix this you'll want to assign a function to defaults instead of just a plain object. Wrap the object below in a function which returns the object. This will cause the defaults to get evaluated every time a new instance is created.
Dr. Goodparts finally ponied up for a server and has seeded it with his first few appointments. Luckily for us, he bought the REST package with the JSON add-on.
Point the root URL of your
Then, create a new
Setting the urlRoot of the Appointment model lets us do more than just fetch from the server, it also lets us sync changes made to model instances.
Dr. Goodparts isn't feeling good today so we're going to have to cancel his appointments. Set the appointment's
Dr. Goodparts is upset that he wasn't notified when we changed his last appointment to cancelled.
Add a listener to the
Dr. Goodparts browser crashed because of too many alerts.
Instead of listening for all attribute changes, just listen and alert when changes are made to the
We've already seen how we can use
Use the
-----------Final Code--------------
titleas the string
"Checkup", and
datewhich should default to the current time
new Date().
var Appointment = Backbone.Model.extend({ defaults:{ "title": "Checkup", "date": new Date() } });
While messing around in the console, you've discovered a strange bug. Every new
Appointmentyou create has the same exact date, instead of the date and time of when the
Appointmentinstance was created.
This is because
new Date()is evaluated once, when the
Appointmentmodel is first created, and not re-evaluated every time a new instance is created.
To fix this you'll want to assign a function to defaults instead of just a plain object. Wrap the object below in a function which returns the object. This will cause the defaults to get evaluated every time a new instance is created.
var Appointment = Backbone.Model.extend({ defaults : function(){ return { title: 'Checkup', date: new Date } } });
Dr. Goodparts finally ponied up for a server and has seeded it with his first few appointments. Luckily for us, he bought the REST package with the JSON add-on.
Point the root URL of your
Appointmentmodel to the
/appointmentsendpoint.
Then, create a new
Appointmentwith an
idof 1, and fetch its data from the server.
var Appointment = Backbone.Model.extend({urlRoot: '/appointments'}); var appointment = new Appointment({id: 1}); appointment.fetch();
Setting the urlRoot of the Appointment model lets us do more than just fetch from the server, it also lets us sync changes made to model instances.
Dr. Goodparts isn't feeling good today so we're going to have to cancel his appointments. Set the appointment's
cancelledattribute to true and save the appointment to the server.
var appointment = new Appointment({id: 1}); appointment.set("cancelled", true); //save it to server. appointment.save();
Dr. Goodparts is upset that he wasn't notified when we changed his last appointment to cancelled.
Add a listener to the
appointmentmodel instance to pop-up an alert box (using
alert) whenever any of the model attributes change.
var appointment = new Appointment({id: 1}); appointment.on('change', function(){ alert("Appointment cancelled!"); });
Dr. Goodparts browser crashed because of too many alerts.
Instead of listening for all attribute changes, just listen and alert when changes are made to the
cancelledattribute.
appointment.on('change:cancelled', function(){ alert("Hey Dr. Goodparts, your appointment has changed!"); });
We've already seen how we can use
getto access attributes on a model instance, but what if we wanted them all at once?
Use the
console.logfunction to log the JSON of the appointment instance using
toJSON. If you don't remember how
toJSONworks, consult the Backbone Model docs.
var appointment = new Appointment({id: 1}); console.log(appointment.toJSON());
-----------Final Code--------------
//Create a model CLASS
var Appointment = Backbone.Model.extend({
defaults : function(){
return {
title: 'Checkup',
date: new Date()
}
}
});
//Define a object for model
var Appointment = Backbone.Model.extend({urlRoot: '/appointments'}); var appointment = new Appointment({id: 1}); appointment.fetch();
console.log(appointment.toJSON());
/*
appointment.on('change', function(){
alert("Hey Dr. Goodparts, your appointment has changed!");
});*/
appointment.on('change:cancelled', function(){ alert("Hey Dr. Goodparts, your appointment has changed!"); });
/*
If you want to set attribute
appointment.set("cancelled", true);
//save it to server.
appointment.save();
*/
//Create a View CLASS
var AppointmentView = Backbone.View.extend({
render: function(){
var html = '<li>'+this.model.get('title')+'</li>';
$(this.el).html(html);
}
});
//create a view object, include the model instance
var appointmentView = new AppointmentView({model: appointment });
//set title
appointment.set('title', "Nice to meet you!");
//Show the final view
appointmentView.render();
$('#app').html(appointmentView.el);
相关文章推荐
- more detail pxe deploy in ironic
- [Backbone]3. More detail on View
- 【引】How to Choose the Best Way to Pass Multiple Models in ASP.NET MVC
- CareerCup Finds all the elements that appear more than n/3 times in the list
- [Training Video - 3] [Groovy in Detail] What is a groovy class ?
- Sybase- Could not find SQL statement to include with refid 'getOrderInHdStatisDetailsql'
- A Two-Stage Ensemble of Diverse Models for Advertisement Ranking in KDD Cup 2012
- This version of the rendering library is more recent than your version of ADT plug-in. Please update
- Annan warns against use of more force in Syria
- JSLink to custom list to render people column in detail with picture
- Learn How Google Works: in Gory Detail
- Inconvertible types; cannot cast 'android.app.Fragment' to 'com.example....WorkoutDetailFragment
- Away3D in Flex 4 – Phase 3 – Importing MD2 Models
- ICE Manual(Documentation for Ice 3.5)---The Ice Run Time in Detail(Time Out)
- 安装VisualSVN时遇到的问题-Service ‘VisualSVN Server’ failed to start. Please check VisualSVN Server log in Event Viewer for more details.
- ORACLE11g 实例启动报错 ORA-00205: error in identifying control file, check alert log for more info
- How to Get More Grit in Your Life (Rebroadcast)
- [zt] More on Generics in the CLR
- appears more than once in the keychain The codesign tool requires there only be one
- macro again, hehe, more details and in chinese