Marionette.js 4 - Class Events

क्लास इवेंट्स




marionette

क्लास इवेंट्स

triggerMethod , classes भीतर उपयोग की जाने वाली विभिन्न घटनाओं को ट्रिगर करने के लिए आंतरिक रूप से triggerMethod का उपयोग करता है। यह 'ऑनइवेंट' बाइंडिंग प्रदान करता है जो क्लास इवेंट्स को संभालने के लिए सुविधाजनक हुक प्रदान करता है। विशेष रूप से सभी आंतरिक रूप से ट्रिगर होने वाली घटनाएँ ट्रिगरिंग वर्ग के उदाहरण को घटना के पहले तर्क के रूप में पारित करेंगी।

प्रलेखन सूचकांक

अनुप्रयोग घटनाएँ

Application ऑब्जेक्ट दो घटनाओं को आग देगा:

before:start घटना before:start

आवेदन शुरू होने से ठीक पहले निकाल दिया गया। किसी भी चीज़ के साथ एप्लिकेशन को तैयार करने के लिए इसका उपयोग करें, इसे शुरू करने की आवश्यकता होगी, उदाहरण के लिए राउटर, मॉडल और संग्रह।

घटना start

अनुप्रयोग स्टार्टअप के भाग के रूप में निकाल दिया गया। यह वह जगह है जहाँ आपको अपने विचार दिखाने चाहिए और Backbone.history शुरू करना चाहिए।

import Bb from 'backbone';
import { Application } from 'backbone.marionette';

import MyModel from './mymodel';
import MyView from './myview';

const MyApp = Application.extend({
  region: '#root-element',

  initialize(options) {
    console.log('Initialize' + options.foo);
  },

  onBeforeStart(app, options) {
    this.model = new MyModel(options.data);
  },

  onStart(app, options) {
    this.showView(new MyView({model: this.model}));
    Bb.history.start();
  }
});

const myApp = new MyApp({ foo: 'My App' });
myApp.start({ data: { bar: true } });

जीवंत उदाहरण

जैसा कि दिखाया गया है कि options ऑब्जेक्ट को Application में पारित किया जाता है, जिसे start करने के लिए दूसरा तर्क है।

आवेदन घटनाओं destroy

Application वर्ग भी विनाश घटनाओं को ट्रिगर करता है।

व्यवहार घटनाएँ

घटना को initialize

दृश्य और व्यवहार के निर्माण और आरंभ होने के बाद, होने वाली अंतिम घटना उस व्यवहार पर एक initialize घटना होती है जिसे दृश्य उदाहरण और किसी भी विकल्प को देखने के लिए उत्तीर्ण किया जाता है।

import { Behavior, View } from 'backbone.marionette';

const MyBehavior = Behavior.extend({
  onInitialize(view, options) {
    console.log(options.msg);
  }
});

const MyView = View.extend({
  behaviors: [MyBehavior]
});

const myView = new MyView({ msg: 'view initialized' });

नोट यह घटना इस बात में अद्वितीय है कि ट्रिगर क्लास इंस्टेंस (दृश्य) हैंडलर (व्यवहार) के समान उदाहरण नहीं है। ज्यादातर मामलों में आंतरिक रूप से ट्रिगर की गई घटनाओं को एक ही उदाहरण से ट्रिगर और नियंत्रित किया जाता है, लेकिन यह एक अपवाद है।

अनुमानित घटनाएँ

एक Behavior की घटनाओं को सीधे व्यवहार पर अनुमानित किया जाता है

नोट Behavior को रोकने के लिए Behavior अपने स्वयं के विनाश के साथ विनाश की घटनाओं को ट्रिगर नहीं करता है। Behavior पर होने वाली एक destroy घटना संबंधित दृश्य से उत्पन्न हुई होगी।

क्षेत्र की घटनाएँ

जब आप किसी क्षेत्र के अंदर का दृश्य दिखाते हैं - या तो region.show(view) या showChildView('region', view) - यह Region उन घटनाओं के आसपास की घटनाओं का उत्सर्जन करेगा जिन्हें आप हुक कर सकते हैं।

Region इवेंट्स भी नष्ट घटनाओं को ट्रिगर करता है।

show और before:show इवेंट्स

इन घटनाओं से पहले ( before:show ) और एक क्षेत्र में कुछ भी show बाद ( show ) आग लग जाती है। before:show दौरान कोई दृश्य प्रस्तुत किया जा सकता है या नहीं किया जा सकता है before:show लेकिन एक दृश्य को show द्वारा प्रदान किया show

show घटनाओं को क्षेत्र उदाहरण, दिखाया जा रहा दृश्य, और किसी भी विकल्प को क्षेत्र में region.show

import { Region, View } from 'backbone.marionette';

const MyRegion = Region.extend({
  onBeforeShow(myRegion, view, options) {
    console.log(myRegion.hasView()); //false
    console.log(view.isRendered()); // false
    console.log(options.foo === 'bar'); // true
  },
  onShow(myRegion, view, options) {
    console.log(myRegion.hasView()); //true
    console.log(view.isRendered()); // true
    console.log(options.foo === 'bar'); // true
  }
});

const MyView = View.extend({
  template: _.template('hello')
});

const myRegion = new MyRegion({ el: '#dom-hook' });

myRegion.show(new MyView(), { foo: 'bar' });

empty और before:empty घटनाएं

इन घटनाओं से पहले ( before:empty ) और बाद में ( empty ) एक क्षेत्र के दृष्टिकोण को खाली करते हुए आग लग जाती है। यदि क्षेत्र में कोई दृश्य नहीं है, तो ये घटनाएँ आग नहीं लगेंगी, भले ही क्षेत्र क्षेत्र के भीतर से डोम को अलग कर दे। before:empty दौरान दृश्य को अलग नहीं किया जाएगा या नष्ट नहीं किया जाएगा before:empty लेकिन before:empty दौरान अलग या नष्ट हो जाएगा।

खाली घटनाओं से क्षेत्र का उदाहरण प्राप्त होगा, क्षेत्र छोड़ने का दृश्य।

import { Region, View } from 'backbone.marionette';

const MyRegion = Region.extend({
  onBeforeEmpty(myRegion, view) {
    console.log(myRegion.hasView()); //true
    console.log(view.isDestroyed()); // false
  },
  onEmpty(myRegion, view) {
    console.log(myRegion.hasView()); //false
    console.log(view.isDestroyed()); // true
  }
});

const MyView = View.extend({
  template: _.template('hello')
});

const myRegion = new MyRegion({ el: '#dom-hook' });

myRegion.empty(); // no events, no view emptied

myRegion.show(new MyView());

myRegion.empty();

MnObject ईवेंट

MnObject वर्ग ट्रिगर इवेंट्स को नष्ट कर देता है

घटनाक्रम देखें

add:region और before:add:region घटनाओं

इन घटनाओं से पहले ( before:add:region ) और बाद में ( add:region ) आग एक क्षेत्र को एक दृश्य में जोड़ा जाता है। यह ईवेंट हैंडलर दृश्य उदाहरण, क्षेत्र नाम स्ट्रिंग, और ईवेंट तर्क के रूप में क्षेत्र उदाहरण प्राप्त करेगा। दोनों घटनाओं के लिए क्षेत्र पूरी तरह से त्वरित है।

remove:region और before:remove:region घटनाएं

इन घटनाओं से पहले ( before:remove:region ) और बाद में ( remove:region ) आग एक क्षेत्र को एक दृश्य से हटा दिया जाता है। यह ईवेंट हैंडलर दृश्य उदाहरण, क्षेत्र नाम स्ट्रिंग, और ईवेंट तर्क के रूप में क्षेत्र उदाहरण प्राप्त करेगा। इस क्षेत्र को पहले की घटना में नष्ट नहीं किया जाएगा, लेकिन remove:region द्वारा नष्ट कर दिया गया है remove:region

नोट वर्तमान में इन घटनाओं को केवल view.removeRegion API का उपयोग करके ट्रिगर किया जाता है, न कि जब क्षेत्र सीधे नष्ट हो जाता है। https://github.com/marionettejs/backbone.marionette/issues/3602

संग्रह दृश्य कार्यक्रम

CollectionView दृश्य विशेष रूप से बाल प्रबंधन से संबंधित अद्वितीय घटनाओं को ट्रिगर करता है।

add:child और before:add:child घटनाओं

इन घटनाओं से पहले ( before:add:child ) और बाद में ( add:child ) आग लग जाती है प्रत्येक बच्चे के दृश्य को त्वरित और children को जोड़ा जाता है। संलग्न संग्रह में प्रत्येक आइटम के लिए या addChildView का उपयोग करके जोड़े गए किसी भी दृश्य के लिए ये एक बार फायर करेंगे।

remove:child और before:remove:child घटनाओं

इन घटनाओं से पहले ( before:remove:child ) और बाद में ( remove:child ) बच्चों को प्रत्येक बच्चे के दृश्य को हटा दिया जाता है। यदि यह collection से हटा दिया जाता है या इसे हटा दिया जाता है, तो इसे हटा दिया जाता है, अगर दृश्य नष्ट हो जाता है, तो children से एक दृश्य हटाया जा सकता है।

नोट इस बिंदु से कोई चाइल्डव्यू नष्ट हो भी सकता है और नहीं भी।

नोट जब एक CollectionView दृश्य नष्ट हो जाता है तो यह व्यक्तिगत रूप से अपने children को नहीं हटाएगा। प्रत्येक चाइल्डव्यू को नष्ट कर दिया जाएगा, लेकिन कलेक्शन व्यू के दौरान किसी भी सफाई की आवश्यकता before:destroy:children होनी चाहिए before:destroy:children

sort और before:sort इवेंट

ये घटना CollectionView दृश्य में बच्चों को छांटने before:sort पहले ( before:sort ) और बाद में ( sort ) आग लगाती हैं। ये घटनाएँ केवल तभी आग viewComparator children और एक viewComparator

filter और before:filter ईवेंट

इन घटनाओं से पहले ( before:filter ) और बाद में ( filter ) CollectionView दृश्य में बच्चों को before:filter आग लग जाती है। यह घटना केवल तभी होगी जब children और viewFilter

जब filter ईवेंट को निकाल दिया जाता है, तो फ़िल्टर्ड किए गए बच्चों को पहले से ही दृश्य के el से अलग कर दिया गया होगा, लेकिन नए बच्चों को अभी तक प्रदान नहीं किया गया है। filter ईवेंट न केवल दृश्य आवृत्ति प्राप्त करता है, बल्कि संलग्न दृश्य, और अलग किए गए दृश्य भी प्राप्त करता है।

const MyCollectionView = CollectionView.extend({
  onBeforeFilter(myCollectionView) {
   console.log('Nothing has changed yet!');
  },
  onFilter(myCollectionView, attachViews, detachedView) {
    console.log('Array of attached views', attachedView);
    console.log('Array of detached views', attachedView);
  }
});

render:children और before:render:children घटनाओं

Region show before:show और before:show इन घटनाओं को before:show से पहले ( before:render:children ) और बाद में ( render:children ) childViewContainer

इन घटनाओं को CollectionView दृश्य आवृत्ति और संलग्न किए जाने वाले दृश्यों की सरणी को पारित किया जाएगा। सरणी में दृश्य before:render:children लिए प्रदान या संलग्न नहीं किया जा सकता है before:render:children , लेकिन प्रस्तुत करना और render:children

यदि CollectionView दृश्य यह निर्धारित कर सकता है कि जोड़े गए विचार केवल अंत तक जोड़े जाएंगे, केवल जोड़े गए दृश्य ही घटना के लिए दिए जाएंगे। अन्यथा सभी children विचारों को पारित किया जाएगा।

ध्यान दें कि अगर आपको लगातार इस घटना के सभी विचारों का उपयोग children

destroy:children और before:destroy:children घटनाओं

ये घटना CollectionView दृश्य में बच्चों को नष्ट करने before:destroy:children पहले ( before:destroy:children ) और बाद में ( destroy:children ) आग लगाती हैं। ये घटनाएँ आगेंगी अगर children

संग्रह दृश्य खाली क्षेत्र घटनाएँ

CollectionView दृश्य आंतरिक रूप से एक क्षेत्र का उपयोग करता है जिसका उपयोग यह जानने के लिए किया जा सकता है कि खाली दृश्य दिखाने या नष्ट होने पर। क्षेत्र की घटनाओं को देखें।

import { CollectionView } from 'backbone.marionette';

const MyView = CollectionView.extend({
  emptyView: MyEmptyView
});

const myView = new MyView();

myView.getEmptyRegion().on({
  'show'() {
    console.log('CollectionView is empty!');
  },
  'before:empty'() {
    if (this.hasView()) {
      console.log('CollectionView is removing the emptyView');
    }
  }
});

myView.render();

डोम चेंज इवेंट्स

render और before:render घटनाओं को before:render करना

प्रतिबिंबित करता है जब किसी दृश्य के टेम्पलेट को उसके el में प्रस्तुत किया जा रहा है।

before:render करना किसी भी वर्तमान बच्चे के विचारों को हटाने से पहले होगा। render बच्चे के विचारों को देखने के खाके में संलग्न करने के लिए एक आदर्श घटना है क्योंकि पहले रेंडर आम तौर पर डोम से जुड़ने वाले दृश्य से पहले होता है।

import { View, CollectionView } from 'backbone.marionette';
import MyChildView from './MyChildView';

const MyView = View.extend({
  template: _.template('<div class="foo-region"></div>'),
  regions: {
    'foo': '.foo-region'
  },
  onRender() {
    this.showChildView('foo', new MyChildView());
  }
});

const MyCollectionView = CollectionView.extend({
  childView: MyChildView,
  onRender() {
    // Add a child not from the `collection`
    this.addChildView(new MyChildView());
  }
})

नोट यह घटना केवल तब शुरू होती है जब किसी टेम्पलेट को किसी दृश्य में प्रस्तुत किया जाता है। पूर्व-रेंडर किए गए दृश्य में इस ईवेंट को तब तक ट्रिगर नहीं किया जाएगा जब तक कि पुन: रेंडर नहीं किया गया हो। यदि बच्चे को फिर से render किया जाता है, तो बच्चे के विचारों को संलग्न करने और घटना को render initialize लिए पहले से प्रस्तुत किए गए विचारों का उपयोग करना चाहिए।

नोट: यदि किसी दृश्य का template false होने के लिए सेट है, तो यह घटना ट्रिगर नहीं होगी

attach और before:attach घटनाओं को before:attach

जब किसी दृश्य का योग DOM से जुड़ा होता है, तो उसे दर्शाता है। जब कोई दृश्य स्वयं परिवर्तित नहीं होता है, तो ये ईवेंट ट्रिगर नहीं होंगे।

attach किसी भी बाहरी DOM श्रोताओं जैसे कि jQuery प्लगइन्स को सेटअप करने के लिए आदर्श घटना है जो दृश्य के el का उपयोग करते हैं, लेकिन इसकी सामग्री नहीं

detach और before:detach घटनाओं

जब किसी दृश्य का योग DOM से अलग किया जाता है, तब दिखाई देता है। जब कोई दृश्य स्वयं परिवर्तित नहीं होता है, तो ये ईवेंट ट्रिगर नहीं होंगे।

before:detach किसी भी बाहरी DOM श्रोताओं जैसे jQuery प्लगइन्स को साफ करने के लिए आदर्श घटना है जो दृश्य के el का उपयोग करते हैं, लेकिन इसकी सामग्री नहीं

dom:refresh घटना

DOM में किसी दृश्य के el परिवर्तन की सामग्री को दर्शाता है। जब दृश्य पहली बार एड attach होगा तो यह ईवेंट आग लगा देगा। यदि संलग्न दृश्य को फिर से प्रस्तुत किया जाता है तो यह आग भी लगाएगा।

यह किसी भी बाहरी DOM श्रोताओं को सेटअप करने के लिए आदर्श घटना है जैसे jQuery प्लगइन्स जो दृश्य के el के भीतर DOM का उपयोग करते हैं न कि दृश्य के el ही।

नोट जब तक यह पहले से रेंडर HTML नहीं है, तो दृश्य को प्रस्तुत करने के लिए कोई टेम्पलेट नहीं है, तो यह ईवेंट आग नहीं देगा।

dom:remove घटना को dom:remove

जब किसी दृश्य की सामग्री की सामग्री DOM में बदलने वाली होती है, तो वह दर्शाता है। जब दृश्य detach होने वाला होगा तो यह ईवेंट आग लग जाएगा। संलग्न दृश्य को फिर से प्रस्तुत करने से पहले यह आग भी लगाएगा।

यह किसी भी बाहरी डोम श्रोताओं जैसे कि jQuery प्लगइन्स को साफ करने के लिए आदर्श घटना है जो दृश्य के el के भीतर डोम का उपयोग करते हैं न कि दृश्य के स्वयं के।

नोट जब तक यह पहले से रेंडर HTML नहीं है, तो यह ईवेंट आग नहीं देगा जब रेंडर करने के लिए कोई टेम्पलेट नहीं है।

उन्नत घटना सेटिंग्स

Marionette attach / detach इवेंट्स को व्यू ट्री के साथ ट्रिगर करने में सक्षम है साथ ही dom:refresh को ट्रिगर dom:refresh / dom:remove व्यू इवेंट मॉनिटर की वजह से इवेंट को dom:remove । यह मॉनीटर तब शुरू होता है जब कोई दृश्य किसी क्षेत्र में बनाया जाता है या दिखाया जाता है (गैर-मैरियनेट विचारों को संभालने के लिए)।

कुछ मामलों में यह कार्यक्षमता को अक्षम करने के लिए एक उपयोगी प्रदर्शन सुधार हो सकता है। ऐसा करना आसान है जैसा कि monitorViewEvents: false सेट करना आसान है monitorViewEvents: false व्यू क्लास पर monitorViewEvents: false

import { View } from 'backbone.marionette';

const NonMonitoredView = View.extend({
  monitorViewEvents: false
});

नोट : व्यू मॉनिटर को डिसेबल करने से इस व्यू के लिए जेनरेट किए गए इवेंट्स और इस व्यू के सभी चाइल्ड व्यूज टूट जाएंगे। अक्षमता को सावधानी से किया जाना चाहिए।

घटनाओं को नष्ट करें

destroy और before:destroy घटनाओं before:destroy

हर वर्ग की destroy विधि होती है जिसका उपयोग उदाहरण को साफ करने के लिए किया जा सकता है। Behavior के अपवाद के साथ इनमें से प्रत्येक विधि before:destroy ट्रिगर होती है before:destroy और एक destroy घटना।

एक सामान्य नियम के रूप में, onBeforeDestroy उदाहरण के लिए क्लीनअप के लिए सबसे अच्छा हैंडलर है और किसी भी आंतरिक रूप से बनाए गए बच्चे को पहले से ही नष्ट कर दिया जाता है जब onDestroy कहा जाता है।

नोट विचारों के लिए यह DOM को छूने वाली किसी भी चीज़ की सफाई के लिए आदर्श स्थान नहीं है। dom:remove देखें dom:remove डोम संबंधित सफाई के लिए dom:remove या [ before:detach ]।

import { Application, View } from 'backbone.marionette';

const MyView = View.extend({
  onBeforeDestroy(options) {
    console.log(options.foo);
  }
});

const myView = new MyView();

mvView.destroy({ foo: 'destroy view' });

const MyApp = Application.extend({
  onBeforeDestroy(options) {
    console.log(options.foo);
  }
});

const myApp = new MyApp();

myApp.destroy({ foo: 'destroy app' });

CollectionView destroy:children और before:destroy:children घटनाओं

destroy समान, CollectionView ऐसी घटनाएँ होती हैं जब उसके सभी बच्चे नष्ट हो जाते हैं। अधिक जानकारी के लिए संग्रह दृश्य देखें।

सहायक रीढ़ दृश्य

Marionette.Events और triggerMethod

आंतरिक रूप से triggerMethod इवेंट ट्रिगर के लिए triggerMethod का उपयोग करता है। यह API Backbone.View s के लिए उपलब्ध नहीं है, इसलिए Marbette v4 + में Backbone.View s का समर्थन करने के लिए, Marionette.Events को गैर-Marionette दृश्य में मिलाया जाना चाहिए।

यह एक व्यक्तिगत दृश्य परिभाषा के लिए किया जा सकता है:

import { Events } from 'backbone.marionette';

const MyBbView = Backbone.View.extend(Events);

या सभी Backbone.View s के लिए

_.extend(Backbone.View.prototype, Events);

जीवनचक्र घटनाएँ

render और destroy

गैर-मैरियोनेट दृश्य का समर्थन करने के लिए, मैरियनेट यह निर्धारित करने के लिए दो झंडे का उपयोग करता है कि क्या यह दृश्य पर घटनाओं को render और destroy करना ट्रिगर करना चाहिए। यदि कोई कस्टम दृश्य स्वयं render या घटनाओं destroy है, तो संबंधित फ्लैग को इन घटनाओं को दोहराते हुए मैरियनेट से बचने के लिए true होना चाहिए।

// Add support for triggerMethod
import { Events } from 'backbone.marionette';

_.extend(Backbone.View.prototype, Events);

const MyCustomView = Backbone.View.extend({
  supportsRenderLifecycle: true,
  supportsDestroyLifecycle: true,
  render() {
    this.triggerMethod('before:render');

    this.$el.html('render html');

    // Since render is being triggered here set the
    // supportsRenderLifecycle flag to true to avoid duplication
    this.triggerMethod('render');
  },
  destroy() {
    this.triggerMethod('before:destroy');

    this.remove();

    // Since destroy is being triggered here set the
    // supportsDestroyLifecycle flag to true to avoid duplication
    this.triggerMethod('destroy');
  }
});

डोम चेंज लाइफसाइकल इवेंट्स

जैसा कि उन्नत ईवेंट सेटिंग्स में बताया गया है कि कुछ DOM ईवेंट व्यू इवेंट मॉनीटर से ट्रिगर होते हैं, जो व्यू ट्री के नीचे DOM अटैचमेंट संबंधित इवेंट्स को हैंडल करेगा। जब तक मॉनिटर को जोड़ा नहीं जाता तब तक बैकबोन व्यू की कार्यक्षमता नहीं होगी। इसमें रेंडर के अलावा सभी डोम चेंज इवेंट शामिल होंगे।

आप किसी गैर-मैरियनेट दृश्य में मॉनिटर घटनाओं को जोड़ सकते हैं:

import { monitorViewEvents, Events } from 'backbone.marionette';

// Add support for triggerMethod
_.extend(Backbone.View.prototype, Events);

const MyCustomView = Backbone.View.extend({
  initialize() {
    monitorViewEvents(this);
    // Ideally this happens first prior to any rendering
    // or attaching that might occur in the initialize
  }
});