1. model定义
var app = app || {};
(function () {
‘use strict‘;
// User Model
// ----------
app.User = Backbone.Model.extend({
defaults: {
firstName: ‘‘,
lastName: ‘‘,
telNo:‘‘,
email:‘‘
},
});
})();
2.Collection定义
var app = app || {};
(function () {
‘use strict‘;
var Users = Backbone.Collection.extend({
// Reference to this collection‘s model.
model: app.User,
// Save all of the todo items under the `"todos"` namespace.
localStorage: new Backbone.LocalStorage(‘users-backbone‘),
});
// Create our global collection of **Users**.
app.users = new Users();
})();
3. View
/*global Backbone, jQuery, _, ENTER_KEY */
var app = app || {};
(function ($) {
‘use strict‘;
app.AppView = Backbone.View.extend({
//el: ‘.user-list-tb‘,
el: ‘.container‘,
events: {
‘click #register-btn‘: ‘register‘,
‘click #add-btn‘: ‘add‘,
‘click #push-btn‘: ‘push‘,
‘click #unshift-btn‘: ‘unshift‘,
//‘click #add‘: ‘register‘,
},
initialize: function() {
this.$list = $(‘#user-list-bd‘);
//this.$list = $(‘#user-list‘);
this.listenTo(app.users, ‘add‘, this.addOne);
this.listenTo(app.users, ‘reset‘, this.addAll);
//this.listenTo(app.users, ‘all‘, _.debounce(this.render, 0));
app.users.fetch({reset: true});
},
/*render: function() {
},*/
newAttributes: function() {
return {
firstName:this.$("#firstname").val(),
lastName:this.$("#lastname").val(),
telNo:this.$("#telNo").val(),
email:this.$("#email").val(),
};
},
register: function() {
var a = this.newAttributes();
app.users.create(a);
},
addOne: function(user) {
var view = new app.UserlistView({ model: user });
this.$list.append(view.render().el);
//$(‘#aa‘).append("<span>bb</span>");
},
addAll: function() {
///this.$list.html(‘‘);
app.users.each(this.addOne, this);
},
add: function(){
var a = this.newAttributes();
app.users.add(a,{at:2});
console.dir(app.users);
},
push: function(){
var a = this.newAttributes();
app.users.push(a);
console.dir(app.users.models);
},
unshift: function(){
var a = this.newAttributes();
app.users.unshift(a);
console.dir(app.users);
}
});
})(jQuery);
/*global Backbone, jQuery, _, ENTER_KEY */
var app = app || {};
(function ($) {
‘use strict‘;
app.UserlistView = Backbone.View.extend({
tagName: ‘tr‘,
//tagName: ‘li‘,
template: _.template($(‘#user-list‘).html()),
//template: _.template(‘<div><%= firstName %>：<%= telNo %></div>‘),
initialize: function () {
this.listenTo(this.model, ‘change‘, this.render);
},
// Re-render the titles of the todo item.
render: function () {
/*if (this.model.changed.id !== undefined) {
return;
}
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass(‘completed‘, this.model.get(‘completed‘));
this.toggleVisible();
this.$input = this.$(‘.edit‘);
return this;*/
var a = this.template(this.model.toJSON());
this.$el.html(a);
return this;
},
});
})(jQuery);
4. create，add，push，unshift
首先看下create的源代码
// Create a new instance of a model in this collection. Add the model to the
// collection immediately, unless `wait: true` is passed, in which case we
// wait for the server to agree.
create: function(model, options) {
options = options ? _.clone(options) : {};
var wait = options.wait;
if (!(model = this._prepareModel(model, options))) return false;
if (!wait) this.add(model, options);
var collection = this;
var success = options.success;
options.success = function(model, resp, callbackOpts) {
if (wait) collection.add(model, callbackOpts);
if (success) success.call(callbackOpts.context, model, resp, callbackOpts);
};
model.save(null, options);
return model;
},
从源代码来看，create调用model的add方法，然后又调用了save方法，save方法将保存模型到数据库（或替代持久化层）。
create方法触发collection的add事件和sync事件。
再看下add，push，unshift的源代码
// Add a model, or list of models to the set.
add: function(models, options) {
return this.set(models, _.extend({merge: false}, options, addOptions));
},
// Add a model to the end of the collection.
push: function(model, options) {
return this.add(model, _.extend({at: this.length}, options));
},
unshift: function(model, options) {
return this.add(model, _.extend({at: 0}, options));
},
add方法是向集合中增加一个模型（或一个模型数组），触发"add"事件。
传递{at: index}可以将模型插入集合中特定的index索引位置。
push是向集合的末尾增加一个模型。
而unshift是向集合的头上追加一个模型。
当然我们调用的时候，还可以指定option，比如{at: 2}来更改插入位置。
从上面的源代码可以看出，上面3个函数归根结底都是调用set函数，并没有调用save，所以不会将新增加的模型保存到服务器。
5. 关于set方法
http://www.css88.com/doc/backbone/#Collection-set
上是这样解释的：
set方法通过传递模型列表执行一个集合的"smart(智能)"的更新。 如果列表中的一个模型尚不在集合中，那么它将被添加; 如果模型已经在集合中，其属性将被合并; 并且如果集合包含不存在于列表中的任何模型，他们将被删除。 以上所有将触发相应的"add", "remove", 和 "change"事件。 返回集合中的模型。 如果您想自定义的行为， 你可以设置选项：{add: false}, {remove: false}, 或 {merge: false}，将其禁用。
时间： 2024-10-09 15:55:35