1.Model学习(Official Tutorials)
Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.
cid
toJSON
The following is a contrived example, but it demonstrates defining a model with a custom method, setting an attribute, and firing an event keyed to changes in that specific attribute. After running this code once, sidebar will be available in your browser's console, so you can play around with it. (This example can be test in official page)
var Sidebar = Backbone.Model.extend({ promptColor: function() { var cssColor = prompt("Please enter a CSS color:"); this.set({color: cssColor}); } }); window.sidebar = new Sidebar; sidebar.on('change:color', function(model, color) { $('#sidebar').css({background: color}); }); sidebar.set({color: 'white'}); sidebar.promptColor();
当然，我们这样监听颜色的改变也是可以的：
<div id='search_container'></div>
<script type="text/javascript">
var Search = Backbone.Model.extend({
inputColor : function(){
var cssColor = prompt('Please enter a css color:');
this.set({color:cssColor});
},
initialize : function(){
this.on('change:color',function(model,color){
// var color = model.get('color');
$('#search_container').css({background : color});
});
}
});
var search = new Search();
//reset color to be white
search.set({color:'white'});
//call function
search.inputColor();
</script>
extend
Backbone.Model.extend(properties, [classProperties])
extend correctly sets up the prototype chain, so subclasses created with extend can be further extended and subclassed as far as you like.
var Note = Backbone.Model.extend({ initialize: function() { ... }, author: function() { ... }, coordinates: function() { ... }, allowedToEdit: function(account) { return true; } }); var PrivateNote = Note.extend({ allowedToEdit: function(account) { return account.owns(this); } });
Brief aside on super
: JavaScript does not provide a simple way to call super — the function of the same name defined higher on the prototype chain. If you override a core function like set
, or save
, and you want to invoke the parent object's implementation, you'll have to explicitly call it, along these lines:
var Note = Backbone.Model.extend({ set: function(attributes, options) { Backbone.Model.prototype.set.apply(this, arguments); ... } });
constructor / initialize
new Model([attributes], [options])
When creating an instance of a model, you can pass in the initial values of the
attributes
, which will be set
on the model. If you define an
initialize
function, it will be invoked when the model is created.
var Note = Backbone.Model.extend({ initialize: function() { ... }, });
In rare cases, if you're looking to get fancy, you may want to override
constructor
, which allows you to replace the actual constructor function for your model.
var Library = Backbone.Model.extend({ constructor: function() { this.books = new Books(); Backbone.Model.apply(this, arguments); }, parse: function(data, options) { this.books.reset(data.books); return data.library; } });
If you pass a {collection: ...}
as the
options
, the model gains a collection
property that will be used to indicate which collection the model belongs to, and is used to help compute the model's url
. The model.collection
property is otherwise added automatically when you first add a model to a collection.
{url: "..."} and/or {urlRoot: "..."} options may be passed when creating a new model that needs to have a custom one-off URL endpoint.
If {parse: true}
is passed as an
option
, the
attributes
will first be converted by parse
before being set
on the model.
get
model.get(attribute)
Get the current value of an attribute from the model. For example: note.get("title")
set
model.set(attributes, [options])
Set a hash of attributes (one or many) on the model. If any of the attributes change the model's state, a
"change"
event will be triggered on the model. Change events for specific attributes are also triggered, and you can bind to those as well, for example: change:title
, and change:content
. You may also pass individual keys and values.
note.set({title: "March 20", content: "In his eyes she eclipses..."}); book.set("title", "A Scandal in Bohemia");
escape
model.escape(attribute)
Similar to get
, but returns the HTML-escaped version of a model's attribute. If you're interpolating data from the model into HTML, using
escape
to retrieve attributes will prevent XSS
attacks.
var hacker = new Backbone.Model({
name: "<div>123</div>"
});
alert(hacker.escape('name')); //对HTML进行了转译
alert(hacker.get('name')); //直接获得了HTML
has
model.has(attribute)
Returns true
if the attribute is set to a non-null or non-undefined value.
if (note.has("title")) { ... }
unset
model.unset(attribute, [options])
Remove an attribute by deleting it from the internal attributes hash. Fires a
"change"event unless silent is passed as an option.
clear
model.clear([options])
Removes all attributes from the model, including the id
attribute. Fires a
"change"event unless silent is passed as an option.
id
model.id
A special property of models, the id
is an arbitrary string (integer id or UUID). If you set the
id
in the attributes hash, it will be copied onto the model as a direct property. Models can be retrieved by id from collections, and the id is used to generate model URLs by default.
idAttribute
model.idAttribute
A model's unique identifier is stored under the id attribute. If you're directly communicating with a backend (CouchDB, MongoDB) that uses a different unique key, you may set a Model's idAttribute to transparently map from that key to id.
var Meal = Backbone.Model.extend({ idAttribute: "_id" }); var cake = new Meal({ _id: 1, name: "Cake" }); alert("Cake id: " + cake.id);
model.cid
A special property of models, the
cid
or client id is a unique identifier automatically assigned to all models when they're first created. Client ids are handy when the model has not yet been saved to the server, and does not yet have its eventual true
id
, but already needs to be visible in the UI.
attributes
The attributes property is the internal hash containing the model's state — usually (but not necessarily) a form of the JSON object representing the model data on the server. It's often a straightforward serialization of a row from the database, but it could also be client-side computed state.
model.attributes
Please use set to update the attributes instead of modifying them directly. If you'd like to retrieve and munge a copy of the model's attributes, use_.clone(model.attributes) instead.
defaults
model.defaults or model.defaults()
The
defaults
hash (or function) can be used to specify the default attributes for your model. When creating an instance of the model, any unspecified attributes will be set to their default value.
var Meal = Backbone.Model.extend({ defaults: { "appetizer": "caesar salad", "entree": "ravioli", "dessert": "cheesecake" } }); alert("Dessert will be " + (new Meal).get('dessert'));
Remember that in JavaScript, objects are passed by reference, so if you include an object as a default value, it will be shared among all instances. Instead, define defaults as a function.
model.toJSON()
Return a copy of the model's attributes
for JSON stringification. This can be used for persistence, serialization, or for augmentation before being sent to the server. The name of this method is a bit confusing, as it doesn't actually return a JSON string — but I'm afraid that it's the way that the
JavaScript API for JSON.stringify works.
var artist = new Backbone.Model({ firstName: "Wassily", lastName: "Kandinsky" }); artist.set({birthday: "December 16, 1866"}); alert(JSON.stringify(artist));alert(artist.toJSON());
上面需要区分一下,使用Javascript的JSON.stringify()函数会返回一个字符串；而backbone内置的model.toJSON()会返回的是一个对象。
sync
model.sync(method, model, [options])
Uses Backbone.sync
to persist the state of a model to the server. Can be overridden for custom behavior.
fetch
Resets the model's state from the server by delegating to Backbone.sync.
Returns a jqXHR. Useful if the model has never been populated with data, or if you'd like to ensure that you have the latest server state. A "change" event will be triggered if the server's state differs from the current attributes. Accepts success and error callbacks in the options hash, which are both passed (model, response, options) as arguments.
model.fetch([options])
// Poll every 10 seconds to keep the channel model up-to-date. setInterval(function() { channel.fetch(); }, 10000);
save
model.save([attributes], [options])
Save a model to your database (or alternative persistence layer), by delegating to Backbone.sync
. Returns a jqXHR
if validation is successful and false
otherwise. The
attributes
hash (as in set
) should contain the attributes you'd like to change — keys that aren't mentioned won't be altered — but, a
complete representation
of the resource will be sent to the server. As with set
, you may pass individual keys and values instead of a hash. If the model has a validate
method, and validation fails, the model will not be saved. If the model
isNew, the save will be a "create" (HTTPPOST), if the model already exists on the server, the save will be an "update" (HTTPPUT).
If instead, you'd only like the
changed attributes to be sent to the server, call model.save(attrs, {patch: true})
. You'll get an HTTP PATCH
request to the server with just the passed-in attributes.
Calling save with new attributes will cause a "change"
event immediately, a
"request" event as the Ajax request begins to go to the server, and a "sync" event after the server has acknowledged the successful change. Pass {wait: true} if you'd like to wait for the server before setting the new attributes on the model.
In the following example, notice how our overridden version of Backbone.sync
receives a "create"
request the first time the model is saved and an "update"
request the second time.
Backbone.sync = function(method, model) { alert(method + ": " + JSON.stringify(model)); model.id = 1; }; var book = new Backbone.Model({ title: "The Rough Riders", author: "Theodore Roosevelt" }); book.save(); book.save({author: "Teddy"});
save
accepts success
and error
callbacks in the options hash, which are passed (model, response, options)
and (model, xhr, options)
as arguments, respectively. If a server-side validation fails, return a non- 200
HTTP response code, along with an error response in text or JSON.
book.save("author", "F.D.R.", {error: function(){ ... }});
var Search = Backbone.Model.extend({
defaults : {
name: "<div>123</div>",
age : '18',
sex : 'male'
},
//override sync function
sync : function(method,model){
console.log(method + ':' + JSON.stringify(model));
model.id = 1;
},
});
var search = new Search();
search.save();
search.save();
Result：
create:{"name":"<div>123</div>","age":"18","sex":"male"}
update:{"name":"<div>123</div>","age":"18","sex":"male"}
对于sync方法和save方法之间的联系（ 执行save()方法会调用sync() ），我们可以这样理解：在我们第一次调用save方法的时候，由于我们重写了sync方法，所以save()后会调用sync()里面的代码，并且method是创建；第二次调用save()继续执行sync()里面的代码，由于已经指定了id,则method是更新。
destroy
model.destroy([options])
Destroys the model on the server by delegating an HTTP DELETE
request to Backbone.sync
. Returns a jqXHR
object, or false
if the model isNew
. Accepts success
and error
callbacks in the options hash, which are passed (model, response, options)
and (model, xhr, options)
as arguments, respectively. Triggers a "destroy"
event on the model, which will bubble up through any collections that contain it, a "request"
event as it begins the Ajax request to the server, and a "sync"
event, after the server has successfully acknowledged the model's deletion. Pass {wait: true}
if you'd like to wait for the server to respond before removing the model from the collection.
book.destroy({success: function(model, response) { ... }});