backbone.js - एक क्लिक ईवेंट से मॉडल तक पहुंच

Question

मेरे पास एक बोर्ड व्यू है जिसमें सेलमोडल्स का सेलकोलेक्शन है। मैं संग्रह को डीबी से लाता हूं और फिर सेलव्यू बना देता हूं।

यह सब तब तक काम करता है जब तक मैं बोर्डव्यू पर एक क्लिक ईवेंट के माध्यम से सेलमोडेल तक पहुंचने का प्रयास नहीं करता। मैं अंतर्निहित मॉडल तक नहीं पहुंच सकता ... केवल विचार। क्या इसे करने का कोई तरीका है?

मैं नीचे प्रासंगिक कोड को शामिल करने का प्रयास किया है:

CellModel = Backbone.Model.extend({}); 

CellCollection = Backbone.Collection.extend({ 
    model : CellModel 
}); 

CellView = Backbone.View.extend({ 
    className : 'cell', 
}); 

BoardView = Backbone.View.extend({ 
    this.model.cells = new CellCollection(); 

    render : function() { 
     this.cellList = this.$('.cells'); 
     return this; 
    }, 

    allCells : function(cells) { 
     this.cellList.html(''); 
     this.model.cells.each(this.addCell); 
     return this; 
    }, 

    addCell : function(cell) { 
     var view = new Views.CellView({ 
      model : cell 
     }).render(); 

     this.cellList.append(view.el); 
    }, 

    events : { 
     'click .cell' : 'analyzeCellClick', 
    }, 

    analyzeCellClick : function(e) { 
     // ????????? 
    } 
}); 

मैं, क्लिक करने के लिए BoardView, नहीं cellview पर "हो" की जरूरत है, क्योंकि यह बोर्ड विशेष तर्क शामिल है।

Answer 1

मैं कम से कम दो दृष्टिकोण तुम यहाँ का उपयोग कर सकते के बारे में सोच सकते हैं:

1. प्रारंभ में cellview को BoardView दर्रा, और फिर cellView में घटना को संभाल:

   var CellView = Backbone.View.extend({ 
       className : 'cell', 
   
       initialize: function(opts) { 
        this.parent = opts.parent 
       }, 
   
       events : { 
        'click' : 'analyzeCellClick', 
       }, 
   
       analyzeCellClick : function() { 
        // pass the relevant CellModel to the BoardView 
        this.parent.analyzeCellClick(this.model); 
       } 
   }); 
   
   var BoardView = Backbone.View.extend({ 
       // ... 
   
       addCell : function(cell) { 
        var view = new Views.CellView({ 
         model : cell, 
         parent : this 
        }).render(); 
   
        this.cellList.append(view.el); 
       }, 
   
       analyzeCellClick : function(cell) { 
        // do something with cell 
       } 
   }); 
   

   यह काम करेगा, लेकिन मैं विचारों को एक-दूसरे के तरीकों पर कॉल करना पसंद नहीं करता, क्योंकि इससे उन्हें अधिक कसकर मिलती है।

2. डोम को CellModel आईडी संलग्न जब आप इसे प्रस्तुत करना:

   var CellView = Backbone.View.extend({ 
       className : 'cell', 
   
       render: function() { 
        $(this.el).data('cellId', this.model.id) 
        // I assume you're doing other render stuff here as well 
       } 
   }); 
   
   var BoardView = Backbone.View.extend({ 
       // ... 
   
       analyzeCellClick : function(evt) { 
        var cellId = $(evt.target).data('cellId'), 
         cell = this.model.cells.get(cellId); 
        // do something with cell 
       } 
   }); 
   

   यह शायद एक छोटे से क्लीनर है कि यह तंग ऊपर उल्लेख किया युग्मन से बचा जाता है, लेकिन मुझे लगता है कि किसी भी तरह से काम करेगा।

Answer 2

अच्छा सवाल! मुझे लगता है कि सबसे अच्छा समाधान एक

EventBus उर्फ ​​EventDispatcher

लागू करने के लिए अपने आवेदन के विभिन्न क्षेत्रों के बीच सभी घटनाओं समन्वय करने के लिए किया जाएगा।

कि मार्ग जा रहे हैं, स्वच्छ शिथिल युग्मित, को लागू करने के लिए आसान, बढ़ाई लगता है और यह वास्तव में रीढ़ की हड्डी के प्रलेखन ने यह बताया है देखना Backbone Docs

कृपया यह भी विषय here और here क्योंकि (भले ही मैंने कोशिश की पर अधिक पढ़ सकते हैं कड़ी मेहनत) मेरी खुद की व्याख्या मेरे लिए तरह का मामूली लगता है।

पांच कदम स्पष्टीकरण:

1. अपने मुख्य या एक util के रूप में कहीं और में एक EventBus बनाएँ और शामिल/आवश्यकता होती है यह

   var dispatcher = _.clone(Backbone.Events); // or _.extends 
   

2. एक या अधिक कॉलबैक hanlder जोड़े (एस) से

   dispatcher.CELL_CLICK = 'cellClicked' 
   

3. अपने childView की Eventlistener (यहाँ: cellview) के लिए एक ट्रिगर जोड़ें

   dispatcher.trigger(dispatcher.CELL_CLICK , this.model); 
   

4. अपने parentView के प्रारंभ कार्य करने के लिए एक श्रोता जोड़ें (यहाँ: BoardView)

   eventBus.on(eventBus.CARD_CLICK, this.cardClick); 
   

,210

5. अपने parentView के भीतर इसी कॉलबैक परिभाषित करें (और अपने _.bindAll में जोड़ने)

   cellClicked: function(model) { 
   // do what you want with your data here 
   console.log(model.get('someFnOrAttribute') 
   } 
   

Answer 3

मैं CellView क्लिक करें घटना संभालने दें होगा, लेकिन यह सिर्फ ट्रिगर किया जाएगा एक रीढ़ की हड्डी घटना:

var CellView = Backbone.View.extend({ 
    className : 'cell', 

    initialize: function() { 
     _.bindAll(this, 'analyzeCellClick'); 
    } 

    events : { 
     'click' : 'analyzeCellClick', 
    }, 

    analyzeCellClick : function() { 
     this.trigger('cellClicked', this.model); 
    } 
}); 

var BoardView = Backbone.View.extend({ 
    // ... 

    addCell : function(cell) { 
     var view = new Views.CellView({ 
      model : cell 
     }).render(); 

     this.cellList.append(view.el); 
     view.bind('cellClicked', function(cell) { 
       this.analyzeCellClick(cell); 
      }; 
    }, 

    analyzeCellClick : function(cell) { 
     // do something with cell 
    } 
});