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. });
  12. varChildView=Backbone.View.extend({
  13. tagName:'div',
  14. id:'childDiv',
  15. render:function(){
  16. this.$el.html('hello wrold');
  17. returnthis;
  18. }
  19. });
  20. var parentView =newParentView();
  21. $('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(){
  14. this.$el.html(this.childView.render().el);
  15. this.$el.append(this.childView2.render().el);
  16. console.log('trigger childrenView2');
  17. this.childView2.trigger('test');
  18. returnthis;
  19. }
  20. });
  21. varChildView=Backbone.View.extend({
  22. tagName:'div',
  23. id:'childDiv',
  24. render:function(){
  25. this.$el.html('hello wrold');
  26. returnthis;
  27. }
  28. });
  29. varChildView2=Backbone.View.extend({
  30. tagName:'div',
  31. id:'childDiv2',
  32. initialize:function(){
  33. this.on('test',function(){
  34. console.log('hello');
  35. });
  36. },
  37. render:function(){
  38. this.$el.html('hello wrold222222222');
  39. returnthis;
  40. }
  41. });
  42. var parentView =newParentView();
  43. $('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. });
  14. varChildView=Backbone.View.extend({
  15. tagName:'div',
  16. id:'childDiv',
  17. render:function(){
  18. Backboone.trigger('children2',{name:'children111111111111111'});
  19. this.$el.html('hello wrold');
  20. returnthis;
  21. }
  22. });
  23. varChildView2=Backbone.View.extend({
  24. tagName:'div',
  25. id:'childDiv2',
  26. initialize:function(){
  27. Backbone.on('children2',function(data){
  28. console.log('this is ChilrenView2222222222222');
  29. console.log(data);//{name:'children111111111111111'}
  30. })
  31. },
  32. render:function(){
  33. this.$el.html('hello wrold222222222');
  34. returnthis;
  35. }
  36. });
  37. var parentView =newParentView();
  38. $('body').append(parentView.render().el);
 
* 數據邏輯處理儘可能不要放在視圖層(View)
未完。。。。。。。。。。。。。。。。
相關文章
相關標籤/搜索