DEMO介绍是
DEMO通信录的扩展，使用requirejs模块化整合
大体实现
• model文件 model/contact.js
1 define(function (){
2 // user contact
3 var Contact = (function(){
4 var _c = Backbone.Model.extend({
5 defaults: {
6 name: ‘小强‘,
7 email: ‘小强@无敌.com‘
8 },
9 // validate user name
10 validate: function(attrs,options) {
11 if (attrs.name == "") {
12 return "what‘s the name?";
13 };
14 },
15 // for user search
16 filter: function(query) {
17 if (typeof(query) === ‘undefined‘ || query === null || query === ‘‘) return true;
18 query = query.toLowerCase();
19 return this.get(‘name‘).toLowerCase().indexOf(query) != -1 || this.get(‘email‘).toLowerCase().indexOf(query) != -1;
20 }
21 });
22 return _c;
23 })();
24
25 var _store = (function(){
26 return new Store("my-contacts");
27 })();
28 var Contacts = (function(){
29 var _c = Backbone.Collection.extend({
30 model: Contact,
31 localStorage: _store
32 });
33 return _c;
34 })();
35
36 return {
37 Contact:Contact,
38 Contacts:Contacts
39 };
40
41 });
• view文件 view/view.js
1 define(["model/contact"], function (_contact){
2
3 // one user contact view
4 var ContactItemView = Backbone.View.extend({
5 className: ‘item‘,
6 template: _.template($(‘#tpl-item‘).html()),
7 events: {
8 ‘click‘: ‘select‘
9 },
10 initialize: function() {
11 _.bindAll(this, ‘select‘); // select方法绑定到当前对象
12 this.model.bind(‘reset‘, this.render, this);
13 this.model.bind(‘change‘, this.render, this);
14 this.model.bind(‘destroy‘, this.remove, this);
15 if(this.model.view){
16 this.model.view.remove();
17 }
18 this.model.view = this;
19 },
20 render: function() {
21 this.$el.html(this.template(this.model.toJSON()));
22 return this;
23 },
24 select: function() { // 选择某个联系人
25 appRouter.navigate(‘contacts/‘ + this.model.cid, {
26 trigger: true
27 });
28 },
29 active: function() {
30 this.$el.addClass(‘active‘);
31 },
32 deactive: function() {
33 this.$el.removeClass(‘active‘);
34 }
35 });
36
37 // user contact list view
38 var ContactListView = Backbone.View.extend({
39 className: ‘sidebar‘,
40 template: _.template($(‘#tpl-sidebar‘).html()),
41 events: {
42 ‘click footer button‘: ‘create‘, // footer 标签内的 button 标签 click 事件
43 ‘click input‘: ‘filter‘,
44 ‘keyup input‘: ‘filter‘
45 },
46 initialize: function() {
47 _.bindAll(this, ‘create‘, ‘filter‘); // 给 create,filter 函数绑定到当前对象
48 // model 监听事件
49 this.model.bind(‘reset‘, this.renderAll, this);
50 this.model.bind(‘add‘, this.add, this);
51 this.model.bind(‘remove‘, this.remove, this);
52 },
53 render: function() {
54 $(this.el).html(this.template());
55 this.renderAll();
56 return this;
57 },
58 renderAll: function() {
59 this.$(".items").empty();
60 this.model.each(this.renderOne, this);
61 this.filter();
62 },
63 renderOne: function(contact) {
64 var view = new ContactItemView({
65 model: contact
66 });
67 this.$(".items").append(view.render().el);
68 },
69 create: function() {
70 var contact = new _contact.Contact();
71 this.model.add(contact);
72 appRouter.navigate(‘contacts/‘ + contact.cid + ‘/edit‘, {
73 trigger:true
74 });
75 },
76 filter: function() {
77 var query = $(‘input‘, this.el).val();
78 this.model.each(function(contact, element, index, list) {
79 contact.view.$el.toggle(contact.filter(query));
80 });
81 },
82 active: function(item){
83 if (this.activeItem) {
84 this.activeItem.view.deactive();
85 }
86 this.activeItem = item;
87 if (this.activeItem) {
88 this.activeItem.view.active();
89 }
90 },
91 add: function(contact) {
92 this.renderOne(contact);
93 },
94 remove: function(contact) {
95 console.log(contact);
96 }
97 });
98
99 // show one user View
100 var ShowView = Backbone.View.extend({
101 className: ‘show‘,
102 template: _.template($(‘#tpl-show‘).html()),
103 events: {
104 ‘click .edit‘: ‘edit‘
105 },
106 initialize: function() {
107 _.bindAll(this, ‘edit‘);
108 },
109 render: function() {
110 if(this.item){
111 this.$el.html(this.template(this.item.toJSON()));
112 }
113 return this;
114 },
115 change: function(item) {
116 this.item = item;
117 this.render();
118 },
119 edit: function() {
120 if (this.item) appRouter.navigate(‘contacts/‘ + this.item.cid + ‘/edit‘, {
121 trigger: true
122 });
123 }
124 });
125
126 // edit usr contact view
127 var EditView = Backbone.View.extend({
128 className: ‘edit‘,
129 template: _.template($(‘#tpl-edit‘).html()),
130 events: {
131 ‘submit form‘: ‘submit‘,
132 ‘click .save‘: ‘submit‘,
133 ‘click .delete‘: ‘remove‘
134 },
135 initialize: function() {
136 _.bindAll(this, ‘submit‘, ‘remove‘);
137 },
138 render: function() {
139 if(this.item){
140 this.$el.html(this.template(this.item.toJSON()));
141 }
142 return this;
143 },
144 change: function(item) {
145 this.item = item;
146 this.render();
147 },
148 submit: function() {
149 this.item.set(this.form());
150 this.item.save();
151 appRouter.navigate(‘contacts/‘ + this.item.cid, {
152 trigger:true
153 });
154 return false;
155 },
156 form: function() {
157 return {
158 name: this.$(‘form [name="name"]‘).val(),
159 email: this.$(‘form [name="email"]‘).val()
160 };
161 },
162 remove: function() {
163 this.item.destroy();
164 this.item = null;
165 appRouter.navigate(‘‘, {
166 trigger: true
167 });
168 }
169 });
170
171 // main view
172 // show and edit users
173 var MainView = Backbone.View.extend({
174 className: ‘main stack‘,
175 initialize: function() {
176 this.editView = new EditView();
177 this.showView = new ShowView();
178 },
179 render: function() {
180 this.$el.append(this.showView.render().el);
181 this.$el.append(this.editView.render().el);
182 return this;
183 },
184 edit: function(item) {
185 this.showView.$el.removeClass(‘active‘);
186 this.editView.$el.addClass(‘active‘);
187 this.editView.change(item);
188 },
189 show: function(item) {
190 this.editView.$el.removeClass(‘active‘);
191 this.showView.$el.addClass(‘active‘);
192 this.showView.change(item);
193 }
194 });
195
196 // app view
197 // all page view, for contact list and main view
198 var AppView = Backbone.View.extend({
199 className: ‘contacts‘,
200 initialize: function() {
201 this.contactList = new ContactListView({
202 model: this.model
203 });
204 this.main = new MainView();
205 this.vdiv = $(‘<div />‘).addClass(‘vdivide‘);
206 this.model.fetch();
207 this.render();
208 },
209 render: function() {
210 this.$el.append(this.contactList.render().el);
211 this.$el.append(this.vdiv);
212 this.$el.append(this.main.render().el);
213 $(‘#article‘).append(this.el);
214 return this;
215 },
216 show: function(item){
217 this.contactList.active(item);
218 this.main.show(item);
219 },
220 edit: function(item){
221 this.contactList.active(item);
222 this.main.edit(item);
223 }
224 });
225
226 return {
227 AppView:AppView,
228 MainView:MainView
229 };
230 });
• router文件 router/router.js
1 define(["view/view","model/contact"], function (_view,_content){
2 var dolymood = {};
3 dolymood.contacts = new _content.Contacts();
4 dolymood.appView = new _view.AppView({
5 model:dolymood.contacts
6 });
7 dolymood.AppRouter = Backbone.Router.extend({
8 routes: {
9 ‘‘: ‘show‘,
10 ‘contacts/:id‘: ‘show‘,
11 ‘contacts/:id/edit‘: ‘edit‘
12 },
13 show: function(id) {
14 if(id !== undefined){
15 dolymood.appView.show(this.getContact(id));
16 }
17 else {
18 dolymood.appView.show(dolymood.contacts.first());
19 }
20 },
21 edit: function(id) {
22 if(id !== undefined){
23 dolymood.appView.edit(this.getContact(id));
24 }
25 },
26 getContact: function(id) {
27 return dolymood.contacts.get(id);
28 }
29 });
30
31 return dolymood;
32
33 });
• main文件
使用main文件对应用进行启动
require(["router/router"], function (dolymood){
// app start
window.appRouter = new dolymood.AppRouter();
Backbone.history.start();
});
• requirejs 的 引用
<script src="js/lib/requirejs.js" type="text/javascript" charset="utf-8" data-main="js/main.js"></script>
时间： 2024-10-12 21:40:34