Marionette.js 4 - Events

मैरियनट इवेंट्स




marionette

मैरियनट इवेंट्स

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

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

घटनाओं के लिए ट्रिगर और सुनना

बैकबोन में पारंपरिक इवेंट हैंडलिंग सिस्टम पूरी तरह से मैरियोनेट में समर्थित है। हालांकि, triggerMethod , triggerMethod विधि का उपयोग करके एक अतिरिक्त ईवेंट एपीआई प्रदान करता है - दोनों के बीच महत्वपूर्ण अंतर यह है कि triggerMethod स्वचालित रूप से विशेष रूप से नामित इवेंट हैंडलर को कॉल करता है।

triggerMethod

जैसे Backbone का trigger है triggerMethod विधि उदाहरण पर नामित घटना को आग triggerMethod - किसी भी श्रोता को फिर घटना पर ट्रिगर किया जाएगा। यदि कोई श्रोता नहीं हैं, तो यह कॉल अभी भी सफल होगी। पहले ईवेंट नाम स्ट्रिंग के बाद सभी तर्क सभी ईवेंट हैंडलर को दिए जाएंगे।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  callMethod(myString) {
    console.log(myString + ' was passed');
  }
});

const myView = new MyView();
/* See Backbone.listenTo */
myView.on('something:happened', myView.callMethod);

/* Calls callMethod('foo'); */
myView.triggerMethod('something:happened', 'foo');

जीवंत उदाहरण

triggerMethod विधि सभी triggerMethod कक्षाओं के लिए उपलब्ध है।

घटनाक्रम सुनकर

मैरियनेट की घटना नियमित बैकबोन घटनाओं की तरह ही काम करती है - आप घटनाओं पर कार्रवाई करने के लिए myView.on और myObject.listenTo का उपयोग कर सकते हैं:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  initialize() {
    this.on('event:happened', this.logCall);
  },

  logCall(myVal) {
    console.log(myVal);
  }
});

जीवंत उदाहरण

आप बैकबोन में भी listenTo उपयोग कर सकते हैं:

import { View } from 'backbone.marionette';

const OtherView = View.extend({
  initialize(someView) {
    this.listenTo(someView, 'event:happened', this.logCall);
  },

  logCall(myVal) {
    console.log(myVal);
  }
});

const MyView = View.extend();

const myView = new MyView();

const otherView = new OtherView(myView);

myView.triggerMethod('event:happened', 'someValue'); // Logs 'someValue'

जीवंत उदाहरण

बैकबोन में के रूप में, listenTo जाने वाले ऑब्जेक्ट को संदर्भ चर के रूप में कहा जाता है। ये बैकबोन की तरह ही व्यवहार करते हैं, इसलिए object.on का उपयोग करते हुए। आपको मेमोरी लीक को रोकने के लिए किसी भी घटना संचालकों को खुद को object.on होगा। Marionette, हालांकि, दृश्य जीवन चक्र के एक हिस्से के रूप में अतिरिक्त सहायकों को प्रदान करता है जो आपके लिए ईवेंट हैंडलर को बांधते हैं और खोलते हैं। यह onEvent बाइंडिंग का मूल है।

बाइंडिंग को onEvent

Backbone.trigger और triggerMethod बीच प्रमुख अंतर यह है कि triggerMethod उदाहरण पर विशेष रूप से नामित घटनाओं को आग लगा सकता है। उदाहरण के लिए, एक ऐसा दृश्य जो प्रस्तुत किया गया है, यह iternally fire view.triggerMethod('render') आग view.triggerMethod('render') और onRender कॉल onRender - आपके विचारों में व्यवहार जोड़ने का एक आसान तरीका प्रदान करेगा।

यह निर्धारित करना कि किसी ईवेंट को किस विधि से कॉल करना आसान है, हम इसे before:dom:refresh उपयोग before:dom:refresh एक उदाहरण के साथ रेखांकित करेंगे before:dom:refresh हालांकि यह उन किसी भी कस्टम ईवेंट के साथ काम करता है जिसे आप फायर करना चाहते हैं:

  1. चारों ओर शब्दों को विभाजित करें : वर्ण - इसलिए before , dom , refresh
  2. प्रत्येक शब्द के पहले अक्षर को कैपिटल करें - Before , Dom , Refresh
  3. एक प्रमुख on - on , Before , Dom , Refresh
  4. इसे एक कॉल में मैश करें - onBeforeDomRefresh

इस प्रक्रिया का उपयोग करते हुए, before:dom:refresh onBeforeDomRefresh विधि को कॉल करेगा। आइए इसे एक कस्टम ईवेंट के साथ एक्शन में देखें:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  onMyEvent(myVal) {
    console.log(myVal);
  }
});

const myView = new MyView();

myView.triggerMethod('my:event', 'someValue'); // Logs 'someValue'

जीवंत उदाहरण

पहले की तरह, घटना के नाम के बाद सभी तर्क triggerMethod में पारित हो गए और इवेंट हैंडलर में अपना रास्ता बना लेंगे। इस पद्धति का उपयोग सुनिश्चित करता है कि कोई अप्रत्याशित मेमोरी लीक नहीं होगी।

events और triggers देखें

दृश्य स्वचालित रूप से डोम घटनाओं को विधियों से जोड़ सकते events और क्रमशः events और triggers साथ events triggers हैं:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  events: {
    'click a': 'showModal'
  },

  triggers: {
    'keyup input': 'data:entered'
  },

  showModal(event) {
    console.log('Show the modal');
  },

  onDataEntered(view, event) {
    console.log('Data was entered');
  }
});

जीवंत उदाहरण

अधिक जानकारी के लिए, DOM इंटरैक्शन दस्तावेज़ देखें

इकाई घटनाओं को देखें

दृश्य अपने मॉडल या संग्रह मॉडल और संग्रह के साथ क्रमशः बाँध सकते हैं।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  modelEvents: {
    'change:someattribute': 'onChangeSomeattribute'
  },

  collectionEvents: {
    'update': 'onCollectionUpdate'
  },

  onChangeSomeattribute() {
    console.log('someattribute was changed');
  },

  onCollectionUpdate() {
    console.log('models were added or removed in the collection');
  }
});

जीवंत उदाहरण

अधिक जानकारी के लिए, इकाई घटनाओं के दस्तावेज़ देखें

चाइल्ड व्यू इवेंट

View और CollectionView View उनके किसी भी प्रत्यक्ष बच्चों पर घटनाओं की निगरानी और कार्रवाई करने में सक्षम हैं। किसी भी घटना को एक दृश्य पर निकाल दिया जाता है और स्वचालित रूप से उनके प्रत्यक्ष माता-पिता को भी प्रचारित किया जाता है। आइए एक त्वरित उदाहरण देखें:

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

const Item = View.extend({
  tagName: 'li',

  triggers: {
    'click a': 'select:item'
  }
});

const Collection = CollectionView.extend({
  tagName: 'ul',

  childViewEvents: {
    'select:item': 'itemSelected'
  },

  itemSelected(childView) {
    console.log('item selected: ' + childView.model.id);
  }
});

जीवंत उदाहरण

इवेंट बबलिंग

घटनाएँ उनके प्रत्यक्ष माता-पिता के विचारों तक एक दृश्य बुलबुले पर निकाल दी जाती हैं, childview: का उपयोग करके किसी भी घटना के तरीकों को childview: उपसर्ग (उस पर शीघ्र ही) और childViewEvents विशेषता के लिए बाध्य किसी भी तरीके। यह बिल्ट-इन इवेंट्स के लिए काम करता है, कस्टम इवेंट्स triggerMethod साथ निकाल दिया जाता है और triggers का उपयोग करके बाध्य इवेंट्स।

नोट : स्वचालित ईवेंट childViewEventPrefix को childViewEventPrefix को false सेट करके अक्षम किया जा सकता है।

अंतर्निहित श्रोताओं का उपयोग करते समय, childview:* घटना उपसर्ग का उपयोग किया जाता है जिसे हैंडलर के हिस्से के रूप में शामिल करने की आवश्यकता होती है:

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

const MyView = View.extend({
  triggers: {
    click: 'click:view'
  },

  doSomething() {
    this.triggerMethod('did:something', this);
  }
});

const ParentView = View.extend({
  regions: {
    foo: '.foo-hook'
  },

  onRender() {
    this.showChildView('foo', new MyView());
  },

  onChildviewClickView(childView) {
    console.log('View clicked ' + childView);
  },

  onChildviewDidSomething(childView) {
    console.log('Something was done to ' + childView);
  }
})

नोट triggers स्वचालित रूप से चाइल्ड व्यू को पैरेंट व्यू के तर्क के रूप में पारित कर देगा, हालांकि triggerMethod नहीं होगा, और इसलिए ध्यान दें कि उपरोक्त उदाहरण में, triggerMethod स्पष्ट रूप से बच्चे के दृश्य को पास करता है।

जीवंत उदाहरण

CollectionView का उपयोग करना

यह CollectionView childView और इसके childView लिए ठीक उसी तरह काम करता है:

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

const MyChild = View.extend({
  triggers: {
    click: 'click:child'
  }
});

const MyList = CollectionView.extend({
  onChildviewClickChild(childView) {
    console.log('Childview ' + childView + ' was clicked');
  }
});

जीवंत उदाहरण

एक चाइल्ड व्यू की घटना उपसर्ग

आप उन घटनाओं के लिए घटना उपसर्ग को अनुकूलित कर सकते हैं जिन्हें दृश्य के माध्यम से अग्रेषित किया गया है। ऐसा करने के लिए, दृश्य या संग्रह दृश्य पर childViewEventPrefix सेट करें। childViewEventPrefix पर अधिक जानकारी के लिए इवेंट childViewEventPrefix देखें।

childViewEventPrefix लिए डिफ़ॉल्ट मान childViewEventPrefix है। इस प्रॉपर्टी को false सेट करने से ऑटोमैटिक इवेंट बबलिंग डिसेबल हो जाएगा

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';
import MyChildView from './my-child-view';

const myCollection = new Backbone.Collection([{}]);

const CollectionView = CollectionView.extend({
  childViewEventPrefix: 'some:prefix',
  childView: MyChildView
});

const collectionView = new CollectionView({
  collection: myCollection
});

collectionView.on('some:prefix:render', function(){
  // child view was rendered
});

collectionView.render();

जीवंत उदाहरण

childViewEventPrefix को व्यू डेफिनिशन या कंस्ट्रक्टर फ़ंक्शन कॉल में एक व्यू इंस्टेंस प्राप्त करने के लिए प्रदान किया जा सकता है।

स्पष्ट घटना श्रोताओं

ईवेंट ट्रिगर्स पर विशिष्ट फ़ंक्शन को कॉल करने के लिए, childViewEvents विशेषता का उपयोग करके चाइल्ड इवेंट्स को पैरेंट व्यू पर विधियों के लिए मैप करें। यह चाइल्ड व्यू पर किए गए childview: - childview: बिना childview: उपसर्ग लेता है - और संदर्भित या संलग्न फ़ंक्शन विधि को कॉल करता है।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  triggers: {
    click: 'view:clicked'
  }
});

const ParentView = View.extend({
  regions: {
    foo: '.foo-hook'
  },

  childViewEvents: {
    'view:clicked': 'displayMessage'
  },

  onRender() {
    this.showChildView('foo', new MyView());
  },

  displayMessage(childView) {
    console.log('Displaying message for ' + childView);
  }
});

जीवंत उदाहरण

क्रियात्मक कार्य

childViewEvents भी इवेंट हैंडलर होने के लिए सीधे फ़ंक्शन संलग्न कर सकता है:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  triggers: {
    click: 'view:clicked'
  }
});

const ParentView = View.extend({
  regions: {
    foo: '.foo-hook'
  },

  childViewEvents: {
    'view:clicked'(childView) {
      console.log('Function called for ' + childView);
    }
  },

  onRender() {
    this.showChildView('foo', new MyView());
  }
});

जीवंत उदाहरण

CollectionView childViewEvents का उपयोग करके

import { CollectionView } from 'backbone.marionette';

// childViewEvents can be specified as a hash...
const MyCollectionView = CollectionView.extend({
  childViewEvents: {
    // This callback will be called whenever a child is rendered or emits a `render` event
    render() {
      console.log('A child view has been rendered.');
    }
  }
});

जीवंत उदाहरण

बाल घटनाओं पर ट्रिगरिंग इवेंट

एक childViewTriggers हैश या विधि मैन्युअल रूप से बाइंडिंग सेट किए बिना चाइल्ड व्यू इवेंट्स की childViewTriggers अनुमति देता है। हैश के मान माता-पिता पर ट्रिगर करने के लिए घटना का एक स्ट्रिंग होना चाहिए।

childViewTriggers शीर्ष पर चीनी है। यह उसी तरह से है जैसे कि triggers events लिए चीनी हैं।

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

// The child view fires a custom event, `show:message`
const ChildView = View.extend({

  // Events hash defines local event handlers that in turn may call `triggerMethod`.
  events: {
    'click .button': 'onClickButton'
  },

  triggers: {
    'submit form': 'submit:form'
  },

  onClickButton () {
    // Both `trigger` and `triggerMethod` events will be caught by parent.
    this.trigger('show:message', 'foo');
    this.triggerMethod('show:message', 'bar');
  }
});

// The parent uses childViewEvents to catch the child view's custom event
const ParentView = CollectionView.extend({
  childView: ChildView,

  childViewTriggers: {
    'show:message': 'child:show:message',
    'submit:form': 'child:submit:form'
  },

  onChildShowMessage (message) {
    console.log('A child view fired show:message with ' + message);
  },

  onChildSubmitForm (childView) {
    console.log('A child view fired submit:form');
  }
});

const GrandParentView = View.extend({
  regions: {
    list: '.list'
  },

  onRender() {
    this.showChildView('list', new ParentView({
      collection: this.collection
    }));
  },

  childViewEvents: {
    'child:show:message': 'showMessage'
  },

  showMessage(childView) {
    console.log('A child (' + childView + ') fired an event');
  }
});

जीवंत उदाहरण

CollectionView के childViewTriggers का उपयोग करना

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

// The child view fires a custom event, `show:message`
const ChildView = View.extend({

  // Events hash defines local event handlers that in turn may call `triggerMethod`.
  events: {
    'click .button': 'onClickButton'
  },

  // Triggers hash converts DOM events directly to view events catchable on the parent.
  // Note that `triggers` automatically pass the first argument as the child view.
  triggers: {
    'submit form': 'submit:form'
  },

  onClickButton () {
    // Both `trigger` and `triggerMethod` events will be caught by parent.
    this.trigger('show:message', 'foo');
    this.triggerMethod('show:message', 'bar');
  }
});

// The parent uses childViewEvents to catch the child view's custom event
const ParentView = CollectionView.extend({

  childView: ChildView,

  childViewTriggers: {
    'show:message': 'child:show:message',
    'submit:form': 'child:submit:form'
  },

  onChildShowMessage (message) {
    console.log('A child view fired show:message with ' + message);
  },

  onChildSubmitForm (childView) {
    console.log('A child view fired submit:form');
  }
});

जीवंत उदाहरण

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

मैरियनट ने अपने निर्माण और विनाश जीवन चक्र के दौरान आग की घटनाओं को देखा। अधिक जानकारी के लिए View जीवनचक्र को कवर करते हुए प्रलेखन।