Marionette.js 4

Regions




marionette

Regions

क्षेत्र आपके अनुप्रयोगों और विचारों में विचारों को प्रबंधित करने, दिखाने और नष्ट करने के लिए लगातार तरीके प्रदान करते हैं।

Region शामिल हैं:

अपने आवेदन के दौरान प्रबंध क्षेत्रों में एक परिचय के लिए विचार रखने के लिए प्रलेखन देखें।

दृश्य दिखाते या खाली करते समय क्षेत्र दृश्य के जीवनचक्र को बनाए रखते हैं।

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

एक क्षेत्र को तत्काल बनाना

जब किसी Region तत्काल बनाया जाता है, तो दो गुण होते हैं, यदि पारित हो जाते हैं, तो यह सीधे उदाहरण से जुड़ा होगा: el , और replaceElement

import { Region } from 'backbone.marionette';

const myRegion = new Region({ ... });

जबकि क्षेत्रों को त्वरित और उपयोगी हो सकता है, उनका प्राथमिक उपयोग मामला Application और View कक्षाओं के माध्यम से होता है।

अनुप्रयोग क्षेत्र को परिभाषित करना

अनुप्रयोग region विशेषता का उपयोग करके किसी एक क्षेत्र को परिभाषित करता है। इसे getRegion() माध्यम से एक्सेस किया जा सकता है या सीधे showView() साथ प्रदर्शित किया जा सकता है। नीचे एक छोटा उदाहरण दिया गया है:

import { Application } from 'backbone.marionette';
import SomeView from './view';

const MyApp = Application.extend({
  region: '#main-content',

  onStart() {
    const mainRegion = this.getRegion();  // Has all the properties of a `Region`
    mainRegion.show(new SomeView());
  }
});

जीवंत उदाहरण

अधिक जानकारी के लिए, एप्लिकेशन डॉक्स देखें।

परिभाषित क्षेत्र

मैरियनेट में आप अपने चयन या View पर एक स्ट्रिंग चयनकर्ता या ऑब्जेक्ट शाब्दिक के साथ एक क्षेत्र को परिभाषित कर सकते हैं। यह अनुभाग View लागू किए गए दो प्रकारों का दस्तावेजीकरण करेगा, हालाँकि वे Application लिए भी काम करेंगे - बस आपकी परिभाषा में region regions को प्रतिस्थापित करें।

त्रुटियां एक गलत क्षेत्र कॉन्फ़िगरेशन के लिए एक त्रुटि डाली जाएगी।

स्ट्रिंगर चयनकर्ता

आप क्षेत्रों को परिभाषित करने के लिए एक jQuery स्ट्रिंग चयनकर्ता का उपयोग कर सकते हैं।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  regions: {
    mainRegion: '#main'
  }
});

अतिरिक्त विकल्प

आप एक वस्तु शाब्दिक के साथ क्षेत्रों को परिभाषित कर सकते हैं। ऑब्जेक्ट शाब्दिक परिभाषा में एक el संपत्ति की उम्मीद है - क्षेत्र को हुक करने के लिए चयनकर्ता स्ट्रिंग। इस प्रारूप के साथ यह परिभाषित करना संभव है कि क्या क्षेत्र दिखा रहा है el अधिलेखित करता है या केवल सामग्री (डिफ़ॉल्ट व्यवहार) को अधिलेखित करता है।

आंतरिक दृश्य की प्रदान की गई सामग्री के साथ क्षेत्र के माता-पिता को अधिलेखित करने के लिए, replaceElement उपयोग करें:

import { View } from 'backbone.marionette';

const OverWriteView = View.extend({
  className: '.new-class'
});

const MyView = View.extend({
  regions: {
    main: {
      el: '.overwrite-me',
      replaceElement: true
    }
  }
});
const view = new MyView();
view.render();

console.log(view.$('.overwrite-me').length); // 1
console.log(view.$('.new-class').length); // 0

view.showChildView('main', new OverWriteView());

console.log(view.$('.overwrite-me').length); // 0
console.log(view.$('.new-class').length); // 1

जब MyView का उदाहरण MyView जाता है, .overwrite-me तत्व को DOM से हटा दिया जाएगा और इसे .new-class एक तत्व से बदल दिया जाएगा - इससे हम table अंदर विचार प्रस्तुत करने या अधिक आसानी से select जैसे काम कर सकते हैं - ये तत्व आमतौर पर हैं क्या सामग्री वे अनुमति देंगे पर बहुत सख्त है।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  regions: {
    regionDefinition: {
      el: '.bar',
      replaceElement: true
    }
  }
});

त्रुटियां उन क्षेत्रों में डाली जाएंगी जिन्हें निर्दिष्ट नहीं किया गया है, या यदि HTML में el मौजूद नहीं है।

फ़ंक्शन के रूप में regions निर्दिष्ट करना

एक View पर regions विशेषता भी एक वस्तु लौटाने के लिए एक समारोह हो सकता है:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  regions(){
    return {
      firstRegion: '#first-region'
    };
  }
});

एक रीजन क्‍लास का उपयोग करना

यदि आपने एक कस्टम क्षेत्र वर्ग बनाया है, तो आप इसका उपयोग अपने क्षेत्र को परिभाषित करने के लिए कर सकते हैं।

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

const MyRegion = Region.extend({
  onShow(){
    // Scroll to the middle
    this.$el.scrollTop(this.currentView.$el.height() / 2 - this.$el.height() / 2);
  }
});

const MyApp = Application.extend({
  regionClass: MyRegion,
  region: '#first-region'
})

const MyView = View.extend({
  regionClass: MyRegion,
  regions: {
    firstRegion: {
      el: '#first-region',
      regionClass: Region // Don't scroll this to the top
    },
    secondRegion: '#second-region'
  }
});

जीवंत उदाहरण

regions में यूआई का संदर्भ देना

क्षेत्र चयनकर्ताओं को सेट करते समय यूआई विशेषता उपयोगी हो सकती है - बस @ui. उपयोग करें @ui. उपसर्ग:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  ui: {
    region: '#first-region'
  },
  regions: {
    firstRegion: '@ui.region'
  }
});

जीवंत उदाहरण

क्षेत्र जोड़ना

क्षेत्रों को एक दृश्य में जोड़ने के बाद इसे तत्काल किया गया है, बस addRegion विधि का उपयोग करें:

import MyView from './myview';

const myView = new MyView();
myView.addRegion('thirdRegion', '#third-region');

अब हम thirdRegion को एक्सेस कर सकते हैं जैसे हम दूसरों को।

आप addRegions का उपयोग करके कई क्षेत्र भी जोड़ सकते हैं।

import MyView from './myview';

const myView = new MyView();
myView.addRegions({
  main: {
    el: '.overwrite-me',
    replaceElement: true
  },
  sidebar: '.sidebar'
});

जीवंत उदाहरण

क्षेत्रों को हटाना

आप सभी क्षेत्रों को हटाने के लिए कॉल करके एक दृश्य से निकाल सकते हैं या आप किसी क्षेत्र को हटाकर हटा सकते हैं। जब एक क्षेत्र को हटा दिया जाता है तो क्षेत्र नष्ट हो जाएगा।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  regions: {
    main: '.main',
    sidebar: '.sidebar',
    header: '.header'
  }
});

const myView = new MyView();

// remove only the main region
const mainRegion = myView.removeRegion('main');

mainRegion.isDestroyed(); // -> true

// remove all regions
myView.removeRegions();

एक दृश्य पर क्षेत्रों का उपयोग करना

क्षेत्रों को जोड़ने और हटाने के अलावा क्षेत्रों का उपयोग करने में मदद करने के लिए कुछ तरीके हैं। ये सभी विधियाँ पहले एक अनियंत्रित दृश्य प्रस्तुत करेंगी ताकि क्षेत्रों को ठीक से आरम्भ किया जा सके।

  • getRegion(name) - getRegion(name) से एक क्षेत्र का अनुरोध करें।
  • getRegions() - नाम द्वारा आयोजित दृश्य पर सभी क्षेत्रों के एक वस्तु शाब्दिक लौटाता है।
  • hasRegion(name) - जांचें कि क्या कोई दृश्य एक क्षेत्र है।
  • emptyRegions() - सभी क्षेत्रों को एक दृश्य पर खाली करें।

एक दृश्य दिखा रहा है

एक क्षेत्र निर्धारित होने के बाद, आप दृश्य show लिए इसकी show विधि को कॉल कर सकते हैं:

const myView = new MyView();
const childView = new MyChildView();
const mainRegion = myView.getRegion('main');

// render and display the view
mainRegion.show(childView, { fooOption: 'bar' });

यह एक दृश्य के showChildView व्यू के showChildView जिसका उपयोग इस प्रकार किया जा सकता है:

const myView = new MyView();
const childView = new MyChildView();

// render and display the view
myView.showChildView('main', childView, { fooOption: 'bar' });

दोनों फॉर्म एक options ऑब्जेक्ट लेते हैं जो show दौरान निकाल दी गई घटनाओं को पास किया जाएगा।

showChildView और getChildView बारे में अधिक जानकारी के लिए, दृश्य के लिए दस्तावेज़ीकरण देखें

त्रुटियां यदि त्रुटि गलत है या नष्ट हो गई हैं, तो एक त्रुटि होगी।

यह देखना कि क्या कोई क्षेत्र एक दृश्य दिखा रहा है

यदि आप यह देखना चाहते हैं कि किसी क्षेत्र में कोई दृश्य है या नहीं, तो आप hasView फ़ंक्शन का उपयोग कर सकते हैं। यह एक बूलियन मान लौटाएगा, जो इस क्षेत्र को एक दृश्य दिखा रहा है या नहीं।

const myView = new MyView();
const mainRegion = myView.getRegion('main');

mainRegion.hasView() // false
mainRegion.show(new OtherView());
mainRegion.hasView() // true

यदि आप किसी मौजूदा दृश्य वाले क्षेत्र में कोई दृश्य दिखाते हैं, तो Marionette नया दिखाने से पहले मौजूदा दृश्य को निकाल देगा।

गैर-मैरियंट दृश्य

मैरियनट क्षेत्र केवल मैरियनट व्यू दिखाने के लिए नहीं हैं - वे Backbone.View उदाहरण भी प्रदर्शित कर सकते हैं। ऐसा करने के लिए, सुनिश्चित करें कि आपका दृश्य एक render() पद्धति को परिभाषित करता है और इसे एक नियमित मैरियनेट व्यू की तरह व्यवहार करें:

import _ from 'underscore';
import Bb from 'backbone';
import { View } from 'backbone.marionette';

const MyChildView = Bb.View.extend({
  render() {
    this.$el.append('<p>Some text</p>');
  },

  onRender() {
    console.log('Regions also fire Lifecycle events on Backbone.View!');
  }
});

const MyParentView = View.extend({
  regions: {
    child: '.child-view'
  },

  template: _.template('<div class="child-view"></div>'),

  onRender() {
    this.showChildView('child', new MyChildView());
  }
});

जैसा कि आप ऊपर देख सकते हैं, आप Backbone.View पर लाइफसाइकल इवेंट्स सुन सकते हैं। दृश्य और मैरियनेट आपके लिए घटनाओं को आग लगा देंगे।

एक टेम्पलेट दिखा रहा है

आप एक क्षेत्र में सीधे एक टेम्पलेट या एक स्ट्रिंग दिखा सकते हैं। इसके अतिरिक्त आप एक टेम्पलेट और किसी अन्य दृश्य विकल्प युक्त एक शाब्दिक पास कर सकते हैं। हुड के तहत एक Marionette.View टेम्पलेट का उपयोग करके Marionette.View जाता है।

const myView = new MyView();

myView.showChildView('main', {
  template: _.template('This is the <%- section %> page'),
  templateContext: { section: 'main' }
});

myView.showChildView('header', _.template('Welcome to the site'));

myView.getRegion('other').show('This text is in another region');

एक क्षेत्र खाली करना

आप एक क्षेत्र से एक क्षेत्र (प्रभावी रूप से इसे "अनशर्टिंग") से हटा सकते हैं। इस क्षेत्र पर region.empty() :

const myView = new MyView();

myView.showChildView('main', new OtherView());
const mainRegion = myView.getRegion('main');
mainRegion.empty();

यह दृश्य को नष्ट कर देगा, किसी भी घटना संचालकों को साफ कर देगा और इसे DOM से हटा देगा। जब किसी क्षेत्र को खाली किया जाता है तो खाली घटनाओं को ट्रिगर किया जाता है

नोट यदि क्षेत्र में वर्तमान में दृश्य नहीं है तो खाली होने पर यह क्षेत्र के अंदर किसी भी HTML को अलग कर देगा। यदि इस क्षेत्र में कोई HTML दिखाई देता है जो दृश्य से संबंधित नहीं है तो वह बना रहेगा

मौजूदा दृश्यों का संरक्षण

यदि आप वर्तमान दृश्य को कॉल करके नए दृश्य के साथ बदलते show , तो यह स्वचालित रूप से पिछले दृश्य को नष्ट कर देगा। आप किसी दूसरे को दिखाने से पहले दृश्य को रोककर इस व्यवहार को रोक सकते हैं।

मौजूदा दृश्य का पता लगाना

यदि आप किसी क्षेत्र से मौजूदा दृश्य को अलग करना चाहते हैं, तो detachView उपयोग detachView

const myView = new MyView();

const myOtherView = new MyView();

const childView = new MyChildView();

// render and display the view
myView.showChildView('main', childView);

// ... somewhere down the line
myOtherView.showChildView('main', myView.getRegion('main').detachView());

नोट जब कोई दृश्य देख रहे हों, तो आपको इसे एक नए क्षेत्र में भेजना चाहिए ताकि मैरियनट अपने जीवन चक्र को स्वचालित रूप से संभाल सके या मेमोरी डिस्क को रोकने के लिए इसे मैन्युअल रूप से destroy कर सके।

एक क्षेत्र reset

किसी भी समय एक क्षेत्र को reset किया जा सकता है। यह प्रदर्शित किए जा रहे किसी भी मौजूदा दृश्य को नष्ट कर देता है, और कैश्ड el को हटा देता है। अगली बार जब क्षेत्र एक दृश्य दिखाता है, तो क्षेत्र की el DOM से क्वेरी की जाती है।

const myView = new MyView();
myView.showChildView('main', new OtherView());
const myRegion = myView.getRegion('main');
myRegion.reset();

यह आपके विचारों के परीक्षण के लिए उपयोगी हो सकता है।

एक क्षेत्र destroy

एक क्षेत्र नष्ट हो सकता है जो क्षेत्र को reset कर देगा, इसे किसी भी मूल दृश्य से हटा देगा, और किसी भी आंतरिक क्षेत्र के श्रोताओं को रोक सकता है। एक नष्ट क्षेत्र का पुन: उपयोग नहीं किया जाना चाहिए।

import { View } from 'backbone.marionette';

const MyView = View.extend({
  regions: {
    mainRegion: '#main'
  }
});

const myView = new MyView();

const myRegion = myView.getRegion('mainRegion');

myRegion.show(new ChildView());

myRegion.destroy();

myRegion.isDestroyed(); // true
myRegion.hasView(); // false
myView.hasRegion('mainRegion'); // false

चेक करें कि क्या व्यू दूसरे के द्वारा स्वैप किया जा रहा है

यदि कोई दृश्य किसी दूसरे द्वारा अदला-बदली किया जा रहा है, तो isSwappingView पद्धति वापस आ जाती है। यह क्षेत्र जीवन चक्र की घटनाओं / विधियों के अंदर उपयोगी है।

क्षेत्र खाली होने पर एक संदेश दिखाएगा:

import { Region } from 'backbone.marionette';

const EmptyMsgRegion = Region.extend({
  onEmpty() {
    if (!this.isSwappingView()) {
      this.$el.append('Empty Region');
    }
  }
});

जीवंत उदाहरण

सेट करें कि देखें का el कैसे संलग्न और अलग है

यह देखने के लिए कि डोम से जुड़ा कैसे है (जब replaceElement: true का उपयोग नहीं किया replaceElement: true यह replaceElement: true । यह विधि एक पैरामीटर - एक शो देखने के लिए प्राप्त करता है) को बदलने के लिए क्षेत्र के attachHtml विधि को ओवरराइड करें।

attachHtml का डिफ़ॉल्ट कार्यान्वयन अनिवार्य रूप से है:

import { Region } from 'backbone.marionette';

Region.prototype.attachHtml = function(view){
  this.el.appendChild(view.el);
}

attachHtml समान, यह निर्धारित करने के लिए कि इस क्षेत्र की सामग्री को attachHtml प्रकार से attachHtml , यह निर्धारित करने के लिए अलग करें। इस विधि में कोई पैरामीटर नहीं है।

अधिकांश मामलों के लिए आप DOM API का उपयोग यह निर्धारित करने के लिए करना चाहेंगे कि एक क्षेत्र html कैसे संलग्न है, लेकिन कुछ मामलों में आप एनीमेशन जैसी स्थितियों के लिए एक एकल क्षेत्र वर्ग को ओवरराइड करना चाहते हैं जहाँ आप संलग्न करना और निष्कासन दोनों को नियंत्रित करना चाहते हैं।

यह उदाहरण स्क्रीन के शीर्ष से नीचे की ओर देखने के बजाय केवल जगह पर दिखाई देगा:

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

const ModalRegion = Region.extend({
  attachHtml(view){
    // Some effect to show the view:
    this.$el.empty().append(view.el);
    this.$el.hide().slideDown('fast');
  }
});

const MyView = View.extend({
  regions: {
    mainRegion: '#main-region',
    modalRegion: {
      regionClass: ModalRegion,
      el: '#modal-region'
    }
  }
});

कॉन्फ़िगर करें देखें कैसे निकालें

डोम से कैसे और कब दृश्य नष्ट / हटा दिया जाता है, इसे बदलने के लिए क्षेत्र की removeView विधि को ओवरराइड करें। यह विधि एक पैरामीटर प्राप्त करती है - हटाने के लिए दृश्य।

removeView का डिफ़ॉल्ट कार्यान्वयन है:

import { Region } from 'backbone.marionette';

Region.prototype.removeView = function(view){
  this.destroyView(view);
}

नष्ट करने की विधि यदि एक Marionette.View वंशज या वेनिला बैकबोन दृश्य है, तो ध्यान में रखते हुए दृश्य को नष्ट कर देता है। यदि यह सुनिश्चित किया जाए कि Marionette.View से दृश्य नीचे आता है, तो इसे view.destroy() कॉल द्वारा प्रतिस्थापित किया जा सकता है

यह उदाहरण एक फीका प्रभाव दिखाएगा और दृश्य को छिपाएगा:

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

const AnimatedRegion = Region.extend({
  attachHtml(view) {
    view.$el
      .css({display: 'none'})
      .appendTo(this.$el);
    if (!this.isSwappingView()) view.$el.fadeIn('slow');
  },

  removeView(view) {
    view.$el.fadeOut('slow', () => {
      this.destroyView(view);
      if (this.currentView) this.currentView.$el.fadeIn('slow');
    });
  }
});

const MyView = View.extend({
  regions: {
    animatedRegion: {
      regionClass: AnimatedRegion,
      el: '#animated-region'
    }
  }
});

जीवंत उदाहरण

सीएसएस के साथ एनिमेटेड क्षेत्र बनाने के लिए एक समान दृष्टिकोण का उपयोग करना संभव है:

जीवंत उदाहरण