javascript बैकबोन जेएस: क्या कोई अन्य विचारों में ट्रिगर अपडेट देख सकता है?




backbone.js backbone-events (6)

मेरी सरल परियोजना में मेरे पास 2 विचार हैं - एक लाइन आइटम व्यू (ब्रांड) और ऐप। मैंने फ़ंक्शन संलग्न किया है जो एकाधिक आइटम चुनने की अनुमति देता है:

var BrandView = Backbone.View.extend({
...some code...
    toggle_select: function() {
        this.model.selected = !this.model.selected;
        if(this.model.selected) $(this.el).addClass('selected');
        else $(this.el).removeClass('selected');
        return this;
    }
});

var AppView = Backbone.View.extend({
...some code...
    delete_selected: function() {
        _.each(Brands.selected(), function(model){ 
            model.delete_selected();
        });
        return false;
    },
});

बात यह है कि, मैं जानना चाहता हूं कि कितने आइटम चुने गए हैं। इस सेटअप में मॉडल को प्रभावित नहीं कर रहा है और इस प्रकार किसी भी घटना को फायर नहीं कर रहा है। और एमवीसी अवधारणा से मैं समझता हूं कि विचार सीधे अन्य विचारों से बात नहीं करनी चाहिए। तो ऐपव्यू कैसे जान सकता है कि ब्रांड व्यू में कुछ चुना जा रहा है?

और अधिक विशेष रूप से, मैं यह जानना चाहता हूं कि कितने आइटम चुने गए थे, इसलिए यदि 1 से अधिक का चयन किया गया है, तो मैं एकाधिक चयन के लिए मेनू दिखाता हूं।


हो सकता है कि आप बैकबोन पब / उप घटनाओं के इस चर्चा को पढ़ना चाहें:

http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

मैं इसे वैश्विक घटना तंत्र के रूप में जोड़ना चाहता हूं:

Backbone.pubSub = _.extend({}, Backbone.Events);

फिर एक दृश्य में आप एक घटना ट्रिगर कर सकते हैं:

Backbone.pubSub.trigger('my-event', payload);

और दूसरे में आप सुन सकते हैं:

Backbone.pubSub.on('my-event', this.onMyEvent, this);

यहां एक समान आवश्यकता के साथ मेरा मामला है: बैकबोन सुनो, समय-समय पर या प्रमाणीकृत अनुरोधों के लिए लॉगिन पृष्ठ पर रीडायरेक्ट करने के लिए एक समाधान की तरह लग रहा था।

मैंने अपने राउटर में इवेंट हैंडलर जोड़ा और इसे वैश्विक घटनाओं को सुन दिया जैसे कि:

Backbone.Router.extend({
    onNotAuthenticated:function(errMsg){
        var redirectView = new LoginView();
        redirectView.displayMessage(errMsg);
        this.loadView(redirectView);
    },
    initialize:function(){
        this.listenTo(Backbone,'auth:not-authenticated',this.onNotAuthenticated);  
    },
    .....
});

और मेरे jquery AJAX त्रुटि हैंडलर में:

$(document).ajaxError(
    function(event, jqxhr, settings, thrownError){
        .......
        if(httpErrorHeaderValue==="some-value"){
             Backbone.trigger("auth:not-authenticated",errMsg);
        }
    });     

मैं एडी ओस्मानी मध्यस्थ पैटर्न http://addyosmani.com/largescalejavascript/#mediatorpattern कहता हूं। पूरा लेख पढ़ने के लायक है।

असल में यह एक इवेंट मैनेजर है जो आपको घटनाओं की सदस्यता लेने और प्रकाशित करने की अनुमति देता है। तो आपका ऐप व्यू किसी ईवेंट, यानी 'चयनित' की सदस्यता लेगा। फिर BrandView 'चयनित' ईवेंट प्रकाशित करेगा।

मुझे यह कारण यह है कि यह आपको सीधे विचारों के बिना विचारों के बीच घटनाओं को भेजने की अनुमति देता है।

उदाहरण के लिए

var mediator = new Mediator(); //LOOK AT THE LINK FOR IMPLEMENTATION

var BrandView = Backbone.View.extend({
    toggle_select: function() {
        ...
        mediator.publish('selected', any, data, you, want);
        return this;
    }
});

var AppView = Backbone.View.extend({
    initialize: function() {
        mediator.subscribe('selected', this.delete_selected)
    },

    delete_selected: function(any, data, you, want) {
        ... do something ...
    },
});

इस तरह आपके ऐप व्यू परवाह नहीं है कि यह एक ब्रांड व्यू या फ़ू व्यू है जो 'चयनित' ईवेंट प्रकाशित करता है, केवल यह घटना होती है। नतीजतन, मुझे यह आपके विचारों के न केवल घटनाओं के प्रबंधन के लिए घटनाओं का प्रबंधन करने का एक सतत तरीका मिल रहा है।

यदि आप 'फेकाडे' के बारे में और पढ़ें, तो आप एक अच्छी अनुमति संरचना बना सकते हैं। यह आपको केवल 'ऐप व्यू' कहने की अनुमति देगा जो मेरे 'चुने गए' ईवेंट की सदस्यता ले सकता है। मुझे यह सहायक लगता है क्योंकि यह बहुत स्पष्ट करता है कि घटनाओं का उपयोग किया जा रहा है।


आप ईवेंट बस के रूप में बैकबोन ऑब्जेक्ट का उपयोग कर सकते हैं।

यह दृष्टिकोण कुछ हद तक क्लीनर है लेकिन फिर भी वैश्विक बैकबोन ऑब्जेक्ट पर निर्भर करता है

var view1 = Backbone.View.extend({

  _onEvent : function(){
    Backbone.trigger('customEvent');
  }

});


var view2 = Backbone.View.extend({

  initialize : function(){
    Backbone.on('customEvent', this._onCustomEvent, this);
  },

  _onCustomEvent : function(){
    // react to document edit.
  }

});

जैसे ही जॉन ने ऊपर सुझाव दिया है, मध्यस्थ पैटर्न इस परिदृश्य में वास्तव में अच्छा काम करता है, क्योंकि एडी ओस्मानी इस मुद्दे को बैकबोन बुनियादी सिद्धांतों में फिर से जोड़ते हैं

Backbone.Mediator का उपयोग करके घायल हो गया। Backbone.Mediator प्लगइन जो सरल और महान है, और मेरे एएमडी व्यू मॉड्यूल को एक साथ काम कर रहा है =)


एक ही मॉडल वस्तुओं का प्रयोग करें। ऐप व्यू को संग्रह के साथ शुरू किया जा सकता है, और ब्रांडव्यू उस संग्रह से एक मॉडल के साथ शुरू किया गया। जब शाखा ऑब्जेक्ट के गुण बदलते हैं, तो उस मॉडल के संदर्भ में कोई अन्य कोड इसे पढ़ सकता है।

इसलिए चलिए आपके पास कुछ ब्रांड हैं जो आप संग्रह के माध्यम से प्राप्त करते हैं:

var brands = new Brands([]);
brands.fetch();

अब आप प्रत्येक मॉडल के लिए एक ऐप व्यू और ब्रांडव्यू की एक सरणी बनाते हैं।

var appView = new AppView({brands: brands});
var brandViews = brands.map(function(brand) {
  return new BrandView({brand: brand});
});

ऐप व्यू और ब्रांड व्यू दोनों के पास एक ही मॉडल ऑब्जेक्ट्स तक पहुंच है, इसलिए जब आप एक बदलते हैं:

brands.get(0).selected = true;

फिर यह उन संदर्भों तक पहुंचने पर बदलता है जो इसका संदर्भ भी देते हैं।

console.log(appView.brands.get(0).selected); // true
console.log(brandViews[0].brand.selected)    // true






backbone-views