Marionette.js 4 - Common Functionality

कॉमन मैरियनट फ़ंक्शनलिटी




marionette

कॉमन मैरियनट फ़ंक्शनलिटी

मैरियनट में कुछ विधियां हैं जो सभी वर्गों के लिए सामान्य हैं

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

initialize

रीढ़ की हड्डी वाली कक्षाओं की तरह, initialize एक ऐसी विधि है जिसे आप किसी भी मैरियनेट वर्ग पर परिभाषित कर सकते हैं, जिसे तब बुलाया जाएगा जब क्लास को तत्काल किया जाएगा और इंस्टेंटेशन पर पारित किसी भी तर्क को पारित किया जाएगा। पहली दलील में getOption हो सकता है कि वर्ग उदाहरण में संलग्न हो।

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  initialize(options, arg2) {
    console.log(options.foo, this.getOption('foo'), arg2);
  }
});

const myObject = new MyObject({ foo: 'bar' }, 'baz'); // logs "bar" "bar" "baz"

जीवंत उदाहरण

extend

बैकबोन से उधार लिया गया, extend वर्ग आधारित विरासत के लिए सभी वर्ग परिभाषाओं पर उपलब्ध है

घटनाक्रम एपीआई

Backbone.Events API सभी वर्गों के लिए उपलब्ध है। प्रत्येक Marionette वर्ग इस API के साथ किसी भी ऑब्जेक्ट को listenTo सकता है और उदाहरण पर ट्रिगर की गई घटनाएँ हो सकती हैं।

नोट : ईवेंट API उन events साथ भ्रमित नहीं होनी चाहिए जो DOM ईवेंट्स को कैप्चर करती हैं।

triggerMethod

ट्रिगर एक घटना और वस्तु पर एक इसी विधि । यह Backbone के trigger लेकिन अतिरिक्त विधि हैंडलर के साथ है।

जब कोई घटना शुरू होती है, तो घटना के नाम के प्रत्येक अनुभाग का पहला अक्षर कैपिटल में होता है, और "ऑन" शब्द इसके सामने स्थित होता है। उदाहरण:

  • triggerMethod('foo') "ऑनफू" फ़ंक्शन को फायर करता है
  • triggerMethod('before:foo') "onBeforeFoo" फ़ंक्शन को फायर करता है

triggerMethod कॉल के लिए दिए गए सभी तर्कों को घटना और विधि दोनों के साथ पारित किया जाता है, इसके अलावा घटना के नाम को संबंधित विधि में पारित नहीं किया जाता है।

triggerMethod('foo', bar) onFoo(bar){...}) को कॉल करेगा

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  initialize(){
    this.triggerMethod('foo', 'baz');
  },
  onFoo(bar){
    console.log(bar);
  }
});

const myObj = new MyObject(); // console.log "baz"

myObj.triggerMethod('foo', 'qux'); // console.log "qux"

triggerMethod बारे में अधिक जानकारी triggerMethod ईवेंट प्रलेखन में पाई जा सकती है।

bindEvents

इस विधि का उपयोग Backbone.Events API के साथ काम करने वाली किसी भी वस्तु को बांधने के लिए किया जाता है। इसमें सभी बैकबोन कक्षाएं, मैरियनेट कक्षाएं और Radio चैनल शामिल हैं।

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  fooEvents: {
    'change:foo': 'doSomething'
  },
  initialize(){
    this.fooChannel = Radio.channel('foo');
    this.bindEvents(this.fooChannel, this.fooEvents);
  },
  doSomething(){
    // the "change:foo" event was fired from the radio channel
    // respond to it appropriately, here.
  }
});

जीवंत उदाहरण

पहला पैरामीटर entity (Backbone.Model, Backbone.Collection या किसी भी ऑब्जेक्ट जिसमें Backbone.Events मिलाया जाता है) से घटनाओं को बांधने के लिए।

दूसरा पैरामीटर { 'event:name': 'eventHandler' } कॉन्फ़िगरेशन का हैश है। एक स्ट्रिंग हैंडलर नाम के बजाय एक फ़ंक्शन प्रदान किया जा सकता है।

त्रुटि यदि दूसरा पैरामीटर ऑब्जेक्ट नहीं है, तो एक त्रुटि डाली जाएगी।

unbindEvents

इस विधि का उपयोग Backbone.Events API के साथ काम करने वाली किसी भी वस्तु को अनबाइंड करने के लिए किया जाता है। इसमें सभी बैकबोन कक्षाएं, मैरियनेट कक्षाएं और Radio चैनल शामिल हैं।

बिना ईवेंट्स हैश के इस तरीके को कॉल करना चैनल के सभी ईवेंट को रद्द कर देगा।

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  fooEvents: {
    'change:foo': 'onChangeFoo',
    'stop': 'onStop'
  },
  initialize(){
    this.fooChannel = Radio.channel('foo');
    this.bindEvents(this.fooChannel, this.fooEvents);
  },
  onChangeFoo(){
    // the "change:foo" event was fired from the radio channel
    // respond to it appropriately, here.

    // Doing something
    this.listenTo(this.fooChannel, 'adhoc', this.render);
  },
  onStop() {
    // Removes all fooEvents
    this.unbindEvents(this.fooChannel, this.fooEvents);

    // Removes all bound fooChannel events including `adhoc`
    this.unbindEvents(this.fooChannel);
  }
});

पहला पैरामीटर entity (Backbone.Model, Backbone.Collection या किसी भी ऑब्जेक्ट जिसमें Backbone.Events मिलाया जाता है) से घटनाओं को बांधने के लिए।

दूसरा पैरामीटर { 'event:name': 'eventHandler' } कॉन्फ़िगरेशन का हैश है। एक स्ट्रिंग हैंडलर नाम के बजाय एक फ़ंक्शन प्रदान किया जा सकता है। यदि दूसरे पैरामैटर की आपूर्ति नहीं की जाती है, तो सभी श्रोताओं को हटा दिया जाता है।

जीवंत उदाहरण

bindRequests

इस विधि का उपयोग Backbone.Radio Request API के साथ काम करने वाली किसी भी वस्तु को बांधने के लिए किया जाता है। इसमें Radio चैनल शामिल हैं।

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  channelName: 'myChannelName',
  radioRequests: {
    'foo:bar': 'doFooBar'
  },
  initialize() {
    const channel = Radio.channel(this.channelName);
    this.bindRequests(channel, this.radioRequests);
  },
  doFooBar() {
    console.log('foo:bar');
    return 'bar';
  }
 });

const myView = new MyView();
const channel = Radio.channel('myChannelName');
channel.request('foo:bar'); // Logs 'foo:bar' and returns 'bar'

जीवंत उदाहरण

पहला पैरामीटर, channel , Radio से एक उदाहरण है।

दूसरा पैरामीटर { 'request:name': 'replyHandler' } कॉन्फ़िगरेशन का हैश है। एक स्ट्रिंग हैंडलर नाम के बजाय एक फ़ंक्शन प्रदान किया जा सकता है।

त्रुटि यदि दूसरा पैरामीटर ऑब्जेक्ट नहीं है, तो एक त्रुटि डाली जाएगी।

unbindRequests

इस विधि का उपयोग Backbone.Radio Request API के साथ काम करने वाली किसी भी वस्तु को अनबाइंड करने के लिए किया जाता है।

बिना रेडियो अनुरोध के इस तरीके को कॉल करना हैश चैनल के सभी अनुरोधों को रद्द कर देगा।

नोट: मेमोरी लीक से बचने के लिए, unbindRequests को unbindRequests में या उससे पहले बुलाया जाना चाहिए।

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  channelName: 'myChannelName',
  radioRequests: {
    'foo:bar': 'doFooBar'
  },
  onAttach() {
    const channel = Radio.channel(this.channelName);
    this.bindRequests(channel, this.radioRequests);
  },
  onBeforeDetach() {
    const channel = Radio.channel(this.channelName);
    this.unbindRequests(channel, this.radioRequests);
  }
 });

जीवंत उदाहरण

पहला पैरामीटर, channel , Radio से एक उदाहरण है।

दूसरा पैरामीटर { 'request:name': 'replyHandler' } कॉन्फ़िगरेशन का हैश है। एक स्ट्रिंग हैंडलर नाम के बजाय एक फ़ंक्शन प्रदान किया जा सकता है। यदि दूसरे पैरामैटर की आपूर्ति नहीं की जाती है, तो सभी हैंडलर हटा दिए जाते हैं।

normalizeMethods

ईवेंट नामों और फ़ंक्शंस और / या फ़ंक्शन नामों का एक हैश प्राप्त करता है, और फ़ंक्शन नामों के साथ उसी हैश को फ़ंक्शन संदर्भों से बदल देता है।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  initialize() {
    const hash = {
      'action:one': 'handleActionOne', // This will become a reference to `this.handleActionOne`
      'action:two': this.handleActionTwo
    };

    this.normalizedHash = this.normalizeMethods(hash);
  },

  do(action) {
    this.normalizedHash[action]();
  },

  handleActionOne() {
    console.log('action:one was fired');
  },

  handleActionTwo() {
    console.log('action:two was fired');
  }

});

const myView = new MyView();
myView.do('action:one');
myView.do('action:two');

जीवंत उदाहरण

getOption

किसी विकल्प तक पहुँचने के लिए, हम getOption विधि का उपयोग करते हैं। getOption में उसी नाम के मान पर वापस गिर जाएगा यदि विकल्पों में परिभाषित नहीं किया गया है।

import { View } from 'backbone.marionette';

const View = View.extend({
  classVal: 'class value',
  initialize(){
    this.instanceVal = 'instance value'
  }
});

const view = new View({ optVal: 'option value' });

view.getOption('instanceVal'); // instance value
view.getOption('classVal'); // class value
view.getOption('optVal'); // option value

const view2 = new View({ instanceVal: 'foo', classVal: 'bar', optVal: 'baz' });

view.getOption('instanceVal'); // foo
view.getOption('classVal'); // bar
view.getOption('optVal'); // baz

जीवंत उदाहरण

मिथ्या भाव

getOption फ़ंक्शन undefined अलावा अन्य options से किसी भी गलत मूल्य को वापस कर देगा। यदि किसी वस्तु के विकल्पों का अपरिभाषित मूल्य है, तो वह वस्तु से मूल्य को सीधे पढ़ने का प्रयास करेगा।

उदाहरण के लिए:

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  foo: 'bar',

  initialize() {
    console.log(this.getOption('foo'));
  }
});

const model1 = new MyObject(); // => "bar"

const myObj = {};
console.log(myObj.foo); // undefined
const model2 = new MyObject({ foo: myObj.foo }); // => "bar"

जीवंत उदाहरण

इस उदाहरण में, "बार" को दोनों बार लौटाया जाता है क्योंकि दूसरे उदाहरण में f लिए अपरिभाषित मान है।

mergeOptions

mergeOptions विधि दो तर्क लेती है: एक options ऑब्जेक्ट और keys options ऑब्जेक्ट से खींचने के लिए। किसी भी मिलान keys को क्लास उदाहरण पर मर्ज किया जाएगा। उदाहरण के लिए:

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  initialize(options) {
    this.mergeOptions(options, ['model', 'something']);
    // this.model and this.something will now be available
  }
});

const myObject = new MyObject({
  model: new Backbone.Model(),
  something: 'test',
  another: 'value'
});

console.log(myObject.model);
console.log(myObject.something);
console.log(myObject.getOption('another'));

जीवंत उदाहरण

इस उदाहरण में, model और something सीधे MyObject उदाहरण पर उपलब्ध हैं, जबकि another को getOption माध्यम से एक्सेस किया जाना चाहिए। यह तब आसान होता है जब आप अतिरिक्त कुंजियाँ जोड़ना चाहते हैं जो कि निर्धारित वर्ग में भारी उपयोग की जाएँगी।

options संपत्ति

मैरियोनेट कक्षाएं वर्ग परिभाषा में एक options संपत्ति को स्वीकार करती हैं जो तात्कालिकता में पारित options तर्क के साथ विलय होती है। पारित options में से मूल्य संपत्ति के मूल्यों को ओवरराइड करता है।

initialize विधि में पारित options तर्क कक्षा में उत्तीर्ण होने के बराबर है। विकल्प को देखते हुए प्रारंभिक के अंदर विकल्प प्राप्त करने के लिए संपत्ति का उपयोग करना आवश्यक है

import { MnObject } from 'backbone.marionette';

const MyObject = MnObject.extend({
  options: {
    foo: 'bar',
    another: 'thing'
  },

  initialize(options) {
    console.log(options.foo) // undefined
    console.log(this.getOption('foo')) // 'bar'
    console.log(this.getOption('another')) // 'value'
  }
});

const myObject = new MyObject({
  another: 'value'
});

मैरियनट क्लासेस

मैरियोनेट आपके दृश्य वृक्ष और अनुप्रयोग संरचना के निर्माण के लिए कुछ कक्षाएं प्रदान करता है।

पढ़ना जारी रखें ...