Backbone使用总结

Backbone使用总结

 View   （主要通过观察者模式）

 视图（DOM）通过使用listenTo监听collection,model变化

1. this.listenTo(c,'remove',function(model, collection){
2. $('#'+ model.id).remove();
3. // sum(c.length);
4. });
5. this.listenTo(c,'add',function(model, collection){
6. console.log(model);
7. console.log(collection);
8. var view =newView(model);
9. $("#mail-list").append(view.render().el);
10. });

视图与视图通信

父视图与子视图之间通信方式：

1. varParentView=Backbone.View.extend({
2. tagName:'div',
3. id:'parentDiv',
4. initialize:function(){
5. this.childView =newChildView();
6. },
7. render:function(){
8. this.$el.html(this.childView.render().el);
9. returnthis;
10. }
11. });
13. varChildView=Backbone.View.extend({
14. tagName:'div',
15. id:'childDiv',
16. render:function(){
17. this.$el.html('hello wrold');
18. returnthis;
19. }
20. });
22. var parentView =newParentView();
23. $('body').append(parentView.render().el);

 

 

子视图与子视图之间通信方式：

方式一：通过父视图

1. varParentView=Backbone.View.extend({
2. tagName:'div',
3. id:'parentDiv',
4. initialize:function(){
5. this.childView =newChildView();
6. this.childView2 =newChildView2();
7. //方式一
8. this.childView.listenTo(this.childView2,'test',function(data){
9. console.log('--------------');
10. console.log('data--->',data);
11. });
12. },
13. render:function(){
15. this.$el.html(this.childView.render().el);
16. this.$el.append(this.childView2.render().el);
17. console.log('trigger childrenView2');
18. this.childView2.trigger('test');
19. returnthis;
20. }
21. });
23. varChildView=Backbone.View.extend({
24. tagName:'div',
25. id:'childDiv',
26. render:function(){
27. this.$el.html('hello wrold');
28. returnthis;
29. }
30. });
31. varChildView2=Backbone.View.extend({
32. tagName:'div',
33. id:'childDiv2',
35. initialize:function(){
37. this.on('test',function(){
38. console.log('hello');
39. });
40. },
42. render:function(){
43. this.$el.html('hello wrold222222222');
44. returnthis;
45. }
46. });
47. var parentView =newParentView();
48. $('body').append(parentView.render().el);

 

方式二：通过全局便利Backbone

1. varParentView=Backbone.View.extend({
2. tagName:'div',
3. id:'parentDiv',
4. initialize:function(){
5. this.childView =newChildView();
6. this.childView2 =newChildView2();
7. },
8. render:function(){
9. this.$el.html(this.childView.render().el);
10. this.$el.append(this.childView2.render().el);
11. returnthis;
12. }
13. });
15. varChildView=Backbone.View.extend({
16. tagName:'div',
17. id:'childDiv',
18. render:function(){
19. Backboone.trigger('children2',{name:'children111111111111111'});
20. this.$el.html('hello wrold');
21. returnthis;
22. }
23. });
24. varChildView2=Backbone.View.extend({
25. tagName:'div',
26. id:'childDiv2',
28. initialize:function(){
29. Backbone.on('children2',function(data){
30. console.log('this is ChilrenView2222222222222');
31. console.log(data);//{name:'children111111111111111'}
32. })
33. },
35. render:function(){
36. this.$el.html('hello wrold222222222');
37. returnthis;
38. }
39. });
40. var parentView =newParentView();
41. $('body').append(parentView.render().el);

 

* 数据逻辑处理尽量不要放在视图层（View)

未完。。。。。。。。。。。。。。。。