Marionette.js 4 - View Lifecycle

जीवनचक्र देखें




marionette

जीवनचक्र देखें

View और CollectionView View दोनों ही उनके जीवनचक्र की स्थिति से अवगत हैं जो इंगित करता है कि क्या दृश्य प्रदान किया गया है, डोम से जुड़ा हुआ है या नष्ट हो गया है।

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

जीवनचक्र राज्य के तरीके

जीवनचक्र की स्थिति की जाँच के लिए View और CollectionView View दोनों तरीके साझा करते हैं।

isRendered()

यदि दृश्य प्रदान किया गया है, तो यह दर्शाते हुए एक बूलियन मान लौटाता है।

isAttached()

एक बूलियन मान लौटाता है यदि दृश्य डोम से जुड़ा हुआ है।

isDestroyed()

यदि दृश्य नष्ट हो गया है, तो यह दर्शाते हुए एक बूलियन मान लौटाता है।

एक दृश्य का त्वरितकरण

Marionette Views Backbone Views हैं और इसलिए जब वे तात्कालिक होते हैं तो दृश्य एक el । यह el दृश्य के लिए रूट नोड होगा और इसकी सामग्री के अलावा यह दृश्य के जीवन के लिए नहीं बदलेगा जब तक कि सीधे जोड़तोड़ न किया जाए (यानी: view.$el.addClass )

दृश्य को डोम (यानी: el: $('.foo-selector') ) या मेमोरी में मौजूदा el पास किया जा सकता है (यानी: el: $('<div></div>') ) या सबसे आमतौर पर, दृश्य backbonejs.org पर प्रलेखित के रूप में तात्कालिकता में अपने स्वयं के el निर्माण करता है।

Marionette दृश्य की प्रारंभिक स्थिति को निर्धारित करेगा कि क्या दृश्य पहले से ही प्रदान या संलग्न माना जाता है। यदि कोई दृश्य पहले से ही प्रस्तुत या संलग्न है, तो इसकी स्थिति उस स्थिति को दर्शाएगी, लेकिन संबंधित घटनाओं को निकाल नहीं दिया जाएगा।

पहले से रेंडर डोम के साथ एक दृश्य को देखने के बारे में अधिक जानकारी के लिए देखें: पहले से मौजूद सामग्री

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

Backbone.View उपयोगकर्ता को setElement का उपयोग करते हुए setElement बाद दृश्य के el को बदलने की अनुमति देता है। इस पद्धति का उपयोग मैरियनेट में भी किया जा सकता है, लेकिन सावधानी के साथ किया जाना चाहिए। setElement घटनाओं को setElement से setElement करेगा, लेकिन यह अनिवार्य रूप से दृश्य के बच्चों की उपेक्षा करेगा, चाहे regions माध्यम से या children माध्यम से और दृश्य के behaviors भी परिवर्तन से अनजान होंगे। मौजूदा दृश्य के योग को बदलने की कोशिश करने के लिए नए el साथ एक नए दृष्टिकोण को फिर से जोड़ना बेहतर है।

एक दृश्य का प्रतिपादन

Marionette रेंडरिंग में एक दृश्य के el की सामग्री को बदल रहा है।

क्या प्रतिपादन इंगित करता है दो Marionette विचारों के बीच थोड़ा भिन्न होता है।

नोट जब एक दृश्य को "रेंडर" माना जाता है तो इसे नष्ट होने तक अनियंत्रित नहीं किया जा सकता है।

रेंडरिंग View

View , रेंडरिंग व्यू के डेटा को क्रमबद्ध करने, उसे टेम्प्लेट में पास करने और उस टेम्प्लेट के परिणामों को लेने और व्यू के el की सामग्री को बदलने के लिए el । इसलिए जब कोई View तात्कालिक होता है, तो यह माना जाता है कि यदि el नोड में कोई सामग्री है तो उसे प्रस्तुत किया जाएगा। हालांकि तात्कालिकता के बाद एक टेम्पलेट खाली रेंडर कर सकता है जिस स्थिति में View को "रेंडर" माना जाएगा भले ही उसमें कोई सामग्री न हो।

CollectionView दृश्य प्रतिपादन

CollectionView दृश्य के लिए, प्रतिपादन संकेत करता है कि दृश्य के children को बनाया गया था और दृश्य के el से जुड़ा हुआ था। इसलिए View विपरीत एक CollectionView View को इसके el में सामग्री के साथ त्वरित किया जा सकता है, लेकिन जब तक कि children को "प्रदान" नहीं किया जाता है, तब तक पूरे दृश्य का प्रतिपादन नहीं किया जाता है।

विशेष रूप से यदि रेंडर करते समय कोई children नहीं हैं, तो भी दृश्य को रेंडर माना जाएगा। यह सही है कि emptyView प्रदान किया गया है या नहीं। इसलिए CollectionView दृश्य "रेंडर" होना संभव है, लेकिन el केवल एक खाली टैग हो सकता है। यह भी ध्यान दें कि View CollectionView तरह ही एक template हो सकता है जो render दौरान render के साथ render किया गया है और संलग्न है, लेकिन टेम्प्लेट रेंडरिंग की स्थिति पर खुद को रेंडर करने का कोई असर नहीं है।

बच्चों का प्रतिपादन

दृश्य प्रस्तुत करने के बाद बच्चे के विचारों को प्रस्तुत करना अक्सर सबसे अच्छी उपलब्धि होती है क्योंकि आम तौर पर पहला रेंडर डोम दर्ज करने वाले दृश्य से पहले होता है। यह दृश्य ट्री में अधिकतम संभव दृश्य पर DOM इंसर्ट करके अनावश्यक रीपैंट और रिफ्लोज़ को रोकने में मदद करता है।

अपवाद पूर्व- निर्धारित सामग्री के साथ दृश्य है । इस मामले में कि दृश्य को त्वरित रूप से प्रस्तुत किया गया है, बच्चे के दृश्य को देखने के initialize में सबसे अच्छा प्रबंधित किया जाता initialize

बच्चे View

सामान्य तौर पर एक बच्चे को एक View में जोड़ने के लिए सबसे अच्छी विधि render इवेंट में showChildView का उपयोग showChildView है।

प्रत्येक रेंडर पर दृश्य क्षेत्र खाली कर दिए जाएंगे, इसलिए render इवेंट के बाहर दिखाए गए विचारों को अभी भी बाद के रेंडरर्स पर फेरबदल करने की आवश्यकता होगी।

CollectionView दृश्य बच्चे

एक CollectionView दृश्य के लिए प्राथमिक उपयोग मामला एक बैकबोन संग्रह की स्थिति से मेल खाने के लिए बच्चे के विचारों को बनाए रख रहा है। डिफ़ॉल्ट रूप से बच्चों को संग्रह में मॉडल से मिलान करने के लिए जोड़ा या हटाया जाएगा। हालाँकि, collection मेल खाने वाले दृश्यों के अलावा, या इसके बजाय एक collection दृश्य में बच्चे हो सकते हैं।

प्रबंधित बच्चे जोड़ना

यदि आप डिफ़ॉल्ट रूप से एक CollectionView दृश्य के बच्चों के लिए एक दृश्य जोड़ते हैं, तो वह इसे collection से जोड़े गए किसी अन्य दृश्य के रूप में collection । इसका मतलब है कि यह viewComparator और viewFilter

इसलिए यदि आप अपने दृश्य में जोड़े गए विचारों के लिए लेखांकन कर रहे हैं और viewComparator इन बच्चों को जोड़ने के लिए सबसे अच्छी जगह है, तो render घटना में होने की संभावना है क्योंकि दृश्य केवल एक बार जोड़े जाएंगे (या यदि बाद में render में बच्चों को फिर से बनाया गया है) collection अपडेट होने के बाद सॉर्ट या फ़िल्टर में प्रबंधित करें।

मानव रहित बच्चों को जोड़ना

प्रबंधित बच्चों के विपरीत, ऐसे मामले हो सकते हैं जहां आप collection परिवर्तन के बाद, या सॉर्टिंग और / या फ़िल्टरिंग के बाद collection दृश्य के परिणामों में दृश्य सम्मिलित करना चाहते हैं। इन मामलों में समाधान CollectionView पर उपयोग की जाने वाली सुविधाओं पर थोड़ा निर्भर हो सकता है।

अन्य विचारों को शामिल किए जाने के बाद और किसी भी प्रबंधित children परिवर्तन से पहले किसी भी अप्रबंधित विचारों को हटाने के लिए लक्ष्य अप्रबंधित विचारों को जोड़ना होगा। ऐसा करने के लिए आपको यह समझना चाहिए कि आपके विशेष उपयोग के मामले में children लिए बदलाव से पहले कौन-सा CollectionView इवेंट होगा। डिफ़ॉल्ट रूप से CollectionView प्रकार के अनुसार एक CollectionView viewComparator क्रमबद्ध होता है, इसलिए जब तक viewComparator अक्षम नहीं viewComparator है, तब तक अप्रबंधित दृश्यों को हटाने के लिए सबसे अच्छी घटना before:sort घटना , लेकिन अगर viewComparator झूठी है, तो विचार करने के लिए अगली घटना before:filter इवेंट आपके CollectionView एक viewFilter , अन्यथा before:render:children घटना आदर्श है।

एक बार आपने अपने अनवांटेड चाइल्ड व्यू को हटाने के लिए सर्वश्रेष्ठ रणनीति निर्धारित कर ली है, उन्हें जोड़ना render:children में सबसे अच्छा है render:children घटना । इसके अतिरिक्त addChildView साथ एक बच्चे को जोड़ने से इन घटनाओं के होने का कारण होगा, इसलिए स्टैक ओवरफ्लो को रोकने के लिए, एक ध्वज का उपयोग करना सबसे अच्छा है कि वह गार्ड को जोड़ता है और एक निर्दिष्ट सूचकांक पर एक नया दृश्य सम्मिलित करता है।

निम्नलिखित सरलीकृत उदाहरण 5 वें सूचकांक में एक अप्रबंधित दृश्य जोड़ देगा और children को किसी भी परिवर्तन से पहले इसे हटा देगा। वास्तविक दुनिया के परिदृश्य में onBeforeSort में किस दृश्य को हटाने के लिए onBeforeSort ट्रैक करना अधिक जटिल होगा।

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  childView: MyChildView,
  onBeforeSort() {
    this.removeChildView(this.children.findByIndex(5));
  },
  onRenderChildren() {
    this.addFooView();
  },
  addFooView() {
    if (this.addingFooView) {
      return;
    }

    this.addingFooView = true;
    this.addChildView(new FooView(), 5);
    this.addingFooView = false;
  }
});

एक दृश्य संलग्न करना

Marionette में एक दृश्य संलग्न किया जाता है यदि दृश्य का el DOM में पाया जा सकता है। attach इवेंट में श्रोताओं को जोड़ने के लिए सबसे अच्छा समय संभावना है।

जबकि दृश्य के el को संलग्न किया जा सकता है और दृश्य के जीवनकाल के दौरान दृश्य की सामग्री को हटाया और जोड़ा जा सकता है। यदि आप dom:refresh attach करने के बजाए व्यू की सामग्री में श्रोताओं को जोड़ रहे हैं dom:refresh घटना सबसे अच्छी होगी।

किसी Region साथ या CollectionView दृश्य के बच्चे के रूप में या दृश्य तात्कालिकता के दौरान दृश्य संलग्न करते समय संलग्न स्थिति को बनाए रखा जाता है । यदि कोई दृश्य $.append [ isAttached ] जैसे अन्य साधनों से जुड़ा हुआ है, तो वह अनुलग्नक की वास्तविक स्थिति को प्रतिबिंबित नहीं कर सकता है।

एक दृश्य का पता लगाना

जब इसके el को DOM से निकाल दिया जाता है तो एक दृश्य अलग कर दिया जाता है। el में जोड़े गए किसी भी श्रोताओं को साफ करने का सबसे अच्छा समय before:detach घटना

हालांकि दृश्य के el संलग्न हो सकते हैं, इसकी सामग्री रेंडर पर हटा दी जाएगी। यदि आपने श्रोताओं को before:detach बजाय दृश्य की सामग्री में जोड़ा है before:detach dom:remove before:detach करें dom:remove घटना सबसे अच्छी होगी।

एक दृश्य नष्ट करना

किसी दृश्य को नष्ट करना (अर्थात: myView.destroy() ) Marionette के भीतर कुछ भी myView.destroy() साफ करता है ताकि अगर किसी दृश्य का उदाहरण अब संदर्भित नहीं है तो दृश्य को ब्राउज़र के कचरा संग्रहकर्ता द्वारा साफ किया जा सके।

इससे before:destroy घटना किसी भी जोड़ा श्रोताओं को देखने के डोम से संबंधित साफ करने के लिए सबसे अच्छी जगह है।

विनाश के बाद देखने की स्थिति संलग्न नहीं है और प्रदान नहीं की गई है, हालांकि el खाली नहीं किया गया है।

बच्चों को नष्ट करना

View के क्षेत्र में या CollectionView View के माध्यम से जोड़े गए बच्चे स्वचालित रूप से नष्ट हो जाएंगे यदि दृश्य फिर से प्रस्तुत किया जाता है, यदि दृश्य नष्ट हो जाता है, या collection के रीसेट होने पर CollectionView दृश्य के लिए।

नोट: कई माता-पिता या कई प्रतिक्षेपों को रोकने के लिए माता-पिता की DOM टुकड़ी के बाद बच्चों को हटा दिया जाता है।