Xương sống: Nhiều lượt xem đăng ký sự kiện của một bộ sưu tập? Đây có phải là một thực hành không tốt?

Question

Tôi có một câu hỏi, những thứ thực sự cơ bản mà tôi nghĩ nhưng:

Tôi chỉ thấy các ví dụ với chế độ xem bộ sưu tập và chế độ xem đơn tùy thuộc vào bộ sưu tập đang được cập nhật. Điều gì xảy ra nếu bạn có nhiều chế độ xem đang cố gắng đăng ký một sự kiện thu thập, tức là đặt lại, addOne, addAll, v.v ...

Tôi có thiếu điểm nào về việc làm/không thực hiện việc này không? Bạn có ví dụ nào về điều này không? Điều đó thậm chí có ý nghĩa không?

Bất kỳ thông tin được nhiều đánh giá

var Coll = Backbone.Collection.extend({ 
     model: SingleModel, 
     url: 'service', 
     initialize: function(){ 
      console.log('collection inited') 

     }   

    }); 

    var SingleModel = Backbone.Collection.extend({});    

    var CollView = Backbone.View.extend({     
     el: 'ul', 
     template: Handlebars.compile(someContainerTemplate), 
     init: function(){ 
      _.bindAll(this, 'render', 'addAll', 'addOne'); 
      this.collection.bind("reset", this.addAll); 

      this.collection.fetch(); 
     }, 
     render: function(){ 
      $(this.el).append(this.template()) 
     }, 

     addAll: function(){ 
      this.collection.each(this.addOne); 
     }, 

     addOne: function(model){ 
      var view = new SingleView({ model: model })    
     } 
    }) 

    var SingleView = Backbone.View.extend({ 
     tagName: "li", 
     events: { 
      "click .delete": "remove"      
     }, 
     template: Handlebars.compile(someTemplateForSingleItem), 
     initialize: function() { 
     _.bindAll(this,'render'); 

      this.model.bind('save', this.addOne); 
      this.model.bind('destroy', removeEl); 
     }, 

     remove: function(){ 
      this.model.destroy(); 
     }, 

     removeEl: function(){ 
      $(this.el).remove(); 
     }, 

     render: function() { 
      var context = this.model.toJSON(); 
      return $(this.el).append(this.template(context)); 
     },  
    }) 


    // standard so far (excluding any bad practices), 
    // but what if you have another view dependent on 
    // say the number of length of the collection, and 
    // you want it to update if any single models are destroyed 

    var HeaderView = Backbone.View.extend({ 
     tagName: "div#header", 
     template: Handlebars.compile(someHeaderTemplate), 
     initialize: function() { 
     _.bindAll(this,'render'); 

     this.model.bind('save', this.addOne); 
     }, 

     render: function() { 
      //assigning this collection length 

      var context = this.collection.length; 
      return $(this.el).append(this.template(context)); 
     },  
    });   

    var coll = new Coll(); 
    new CollView({ collection: coll }); 
    new HeaderView({ collection: coll}); 

Answer 1

gì bạn đang làm là hoàn toàn tốt đẹp và một phần lý do cho việc sử dụng Backbone. Từ Backbone introduction:

Bất cứ khi nào một hành động giao diện người dùng gây ra một thuộc tính của một mô hình thay đổi, mô hình gây nên một "thay đổi" kiện ; tất cả các Chế độ xem hiển thị trạng thái của mô hình có thể được thông báo về thay đổi,

Lưu ý rằng chúng nói "tất cả các chế độ xem", không phải "chế độ xem".

Một ví dụ về nhiều chế độ xem cho một bộ sưu tập sẽ là hệ thống trò chuyện. Giả sử bạn có một tập hợp người dùng trực tuyến; sau đó bạn có thể có một cái nhìn đơn giản trong tiêu đề hiển thị số lượng người đang online và một view (của bộ sưu tập giống nhau) liệt kê những người sử dụng:

var User = Backbone.Model.extend({}); 
var OnlineUsers = Backbone.Collection.extend({ 
    model: User 
}); 

var CounterView = Backbone.View.extend({ 
    tagName: 'span', 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.collection.on('add', this.render); 
     // other interesting events... 
    }, 
    render: function() { 
     this.$el.text(this.collection.size()); 
     return this; 
    } 
}); 
var ListView = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.collection.on('add', this.render); 
     // other interesting events... 
    }, 
    render: function() { 
     var html = this.collection.map(function(m) { 
      return '<p>' + m.get('name') + '</p>'; 
     }); 
     this.$el.html(html.join('')); 
     return this; 
    } 
}); 

Sau đó, bạn muốn có một OnlineUsers dụ nhưng cả hai các trường hợp CounterView và ListView của bạn sẽ xem nó. Khi mọi người truy cập trực tuyến hoặc ngoại tuyến, cả hai chế độ xem sẽ được cập nhật như mong muốn.

đơn giản demo: http://jsfiddle.net/ambiguous/eX7gZ/

Ví dụ tình trạng trên có vẻ như chính xác các loại điều bạn đang làm và nó chính là loại điều mà Backbone là cho. Làm tốt lắm.

Answer 2

Chúng tôi có cùng một vấn đề. Chúng tôi cần sử dụng nhiều Mẫu jQuery với các sự kiện nội bộ duy nhất cho mỗi mô hình mà không cần sử dụng nhiều chế độ xem chủ sở hữu. Đây là giải pháp mà chúng tôi đã đưa ra:

var myHolderView = Backbone.View.extend({ 
    el: '#views', 
    render: function(){ 
     // This is because 'this' change inside the collection.each 
     var $this = this; 

     // If you want a wrapper template 
     var wrapperHtml = $('#view-wrapper-template').tmpl(); 
     $this.$el.append(wrapperHtml); 
     $wrapper = $this.$el.find('> div'); // If wrapper is a div 


     $this.collection.each(function(model){ 
      // Render and append the viewA with internal events 
      var viewA = new myViewA({model: model}); 
      viewA.render(); 

      // Use this to add the views content (viewA.el) to this views element ('#views') 
      //$this.$el.append(viewA.el); 

      // Use this to add the view content (viewA.el) to this views wrapper element ($wrapper) 
      $wrapper.append(viewA.el); 


      // Render and append the viewB with internal events 
      var viewB = new myViewB({model: model}); 
      viewB.render(); 
      //$this.$el.append(viewB.el); 
      $wrapper.append(viewB.el); 


      // Add more views here... 
     }); 
    } 
}); 

nguồn đầy đủ và ví dụ làm việc: http://jsfiddle.net/HLv5z/9/