Marionette.js 4 - CollectionView

Marionette.CollectionView




marionette

Marionette.CollectionView

View जैसी एक CollectionView View DOM के एक हिस्से को एक एकल मूल DOM तत्व या el माध्यम से प्रबंधित करती है। यह दृश्य बच्चे के विचारों के एक व्यवस्थित सेट का प्रबंधन करता है जो दृश्य के el भीतर दिखाया गया है। इन बच्चों को अक्सर एक Backbone.Collection के मॉडल से मिलान करने के लिए बनाया जाता है, हालांकि एक CollectionView दृश्य को collection आवश्यकता नहीं होती है और यह किसी भी दृश्य को सेट कर सकता है।

CollectionView शामिल हैं:

एक CollectionView Behavior में Behavior किया जा सकता है।

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

एक संग्रह दृश्य तुरंत

जब एक CollectionView childView को childViewContainer किया जाता है, तो कई गुण होते हैं, यदि पास हो गए, तो वह सीधे उदाहरण से जुड़ा होगा: attributes , behaviors , childView , childViewContainer , childViewEventPrefix , childViewEvents , childViewOptions , childViewTriggers childViewOptions childViewEvents , childViewOptions , childViewTriggers , className , el , emptyView emptyViewOptions events , id , model , modelEvents , sortWithCollection , tagName , template , templateContext tagName , triggers , ui , viewComparator , viewFilter

import { CollectionView } from 'backbone.marionette';

const myCollectionView = new CollectionView({ ... });

इनमें से कुछ गुण मैरियोनेट से आते हैं, लेकिन कई Backbone.View . Backbone.View से विरासत में मिले हैं।

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

CollectionView render का render तरीका मुख्य रूप से पूरे संग्रह को render करने के लिए जिम्मेदार है। यह संग्रह के प्रत्येक बच्चे के माध्यम से लूप करता है और उन्हें व्यक्तिगत रूप से childView रूप में childView

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({...});

// all of the children views will now be rendered.
new MyCollectionView().render();

टेम्पलेट रेंडर करना

बच्चों को प्रस्तुत करने के अलावा, CollectionView दृश्य में एक template हो सकता है। इस टेम्पलेट के DOM तत्व के भीतर बच्चे के विचारों का प्रतिपादन किया जा सकता है। CollectionView दृश्य प्रस्तुत करने के लिए template संदर्भ के साथ-साथ model या CollectionView को क्रमबद्ध करेगा।

टेम्प्लेट को रेंडर करने के तरीके के बारे में अधिक विवरण के लिए, देखें टेम्पलेट रेंडरिंग

childViewContainer को परिभाषित करना

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

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  childViewContainer: '.js-widgets',
  template: _.template('<h1>Widgets</h1><ul class="js-widgets"></ul>')
});

त्रुटियां यदि बच्चा दृश्यदर्शी नहीं मिल सकता है तो एक त्रुटि होगी।

CollectionView को फिर से प्रस्तुत करना

यदि आपको संपूर्ण संग्रह या टेम्पलेट को फिर से प्रस्तुत करने की आवश्यकता है, तो आप collectionView.render विधि को कॉल कर सकते हैं। यह विधि उन सभी बच्चों के विचारों को नष्ट कर देगी जो पहले जोड़े गए थे।

जीवनचक्र और घटनाएँ देखें

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

और पढो:

इकाई घटनाएँ

CollectionView दृश्य संलग्न model और collection पर होने वाली घटनाओं के लिए बाध्य कर सकता है - इसमें मानक बैकबोन-इवेंट और कस्टम इवेंट दोनों शामिल हैं।

और पढो:

डोम बातचीत

Backbone क्या विचार प्रदान करता है इसके अलावा, Marionette में DOM इंटरैक्शन के लिए अतिरिक्त API है: events , triggers , और ui

डिफ़ॉल्ट रूप से ui केवल टेम्प्लेट के भीतर के तत्वों के लिए बाध्य है। हालांकि events और triggers रूप में वे किसी भी बच्चों पर लागू होंगे दृश्य के el को सौंप दिए जाते हैं। ऐसे उदाहरण हो सकते हैं जहां बाध्यकारी ui सहायक हो जब आप getUI() साथ CollectionView बच्चों के अंदर तत्वों का उपयोग करना चाहते हैं। इन मामलों के लिए आपको स्वयं ui को बांधने की आवश्यकता होगी। CollectionView bindUIElements पर ऐसा करने के लिए bindUIElements चलाएँ:

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  // ...

  ui: {
    checkbox: 'input[type="checkbox"]'
  }
});

const collectionView = new MyCollectionView();

collectionView.bindUIElements();

console.log(collectionView.getUI('checkbox')); // Output all checkboxes.

और पढो:

व्यवहार

एक Behavior आपके विचार तर्क के लिए चिंताओं का एक अलग अलगाव प्रदान करता है, जिससे आप अपने विचारों के बीच आम उपयोगकर्ता-सामना करने वाले कार्यों को साझा कर सकते हैं।

और पढो:

बच्चों को संभालना

CollectionView दृश्य प्रदान होने के बाद बच्चे स्वचालित रूप से प्रबंधित हो जाते हैं। collection के भीतर प्रत्येक मॉडल के लिए CollectionView अपने children ऑब्जेक्ट में एक childView निर्माण और CollectionView करेगा। यह आपको संग्रह दृश्य के भीतर विचारों को आसानी से एक्सेस करने की अनुमति देता है, उन्हें पुनरावृत्त करता है, उन्हें किसी दिए गए अनुक्रमणिका जैसे दृश्य के मॉडल या आईडी और अधिक के द्वारा ढूंढता है।

प्रारंभिक render के बाद CollectionView update और collection की घटनाओं को reset करने के लिए बांधता है।

जब दृश्य के लिए collection reset , तो दृश्य सभी बच्चों को नष्ट कर देगा और पूरे संग्रह को फिर से प्रस्तुत करेगा।

जब एक मॉडल collection में जोड़ा जाता है, तो CollectionView दृश्य उस एक मॉडल को children में प्रस्तुत करेगा।

जब एक मॉडल collection (या नष्ट / नष्ट) से हटा दिया जाता है, तो CollectionView दृश्य उस मॉडल के बच्चे के दृश्य को नष्ट और हटा देगा।

जब दृश्य के लिए collection को सॉर्ट किया जाता है, तो डिफ़ॉल्ट रूप से दृश्य अपने बच्चे के विचारों को स्वचालित रूप से पुन: सॉर्ट करता है जब तक कि CollectionView दृश्य पर sortWithCollection विशेषता false सेट नहीं होती false , या viewComparator false

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

const collection = new Backbone.Collection();

const MyChildView = View.extend({:
  template: false
});

const MyCollectionView = CollectionView.extend({
  childView: MyChildView,
  collection,
});

const myCollectionView = new MyCollectionView();

// Collection view will not re-render as it has not been rendered
collection.reset([{foo: 'foo'}]);

myCollectionView.render();

// Collection view will effectively re-render displaying the new model
collection.reset([{foo: 'bar'}]);

जब बच्चों को रेंडर किया जाता है render:children और before:render:children घटनाओं को ट्रिगर करेगा।

जब बच्चों के लिए एक चाइल्डव्यू जोड़ा जाता है add:child और before:add:child घटनाओं को ट्रिगर करेगा

जब एक चाइल्डव्यू बच्चों को remove:child से हटा दिया जाता है remove:child और before:remove:child घटनाओं को ट्रिगर करेगा।

el भीतर children को संलग्न करना

डिफ़ॉल्ट रूप से CollectionView प्रत्येक चाइल्डव्यू के HTML को एक तत्व बफर सरणी में जोड़ देगा, और फिर संग्रह के दृश्य के भीतर सभी HTML को स्थानांतरित करने के लिए एक बार DOM API के appendContents कॉल करें।

आप अपनी दृश्य परिभाषा में एक attachHtml विधि निर्दिष्ट करके इसे ओवरराइड कर सकते हैं। यह विधि दो मापदंडों को लेती है और इसका कोई वापसी मूल्य नहीं है।

import { CollectionView } from 'backbone.marionette';

CollectionView.extend({

  // The default implementation:
  attachHtml(els, $container){
    // Unless childViewContainer, $container === this.$el
    this.Dom.appendContents(this.el, els);
  }
});

पहला पैरामीटर HTML बफर है, और दूसरा पैरामीटर बच्चों के लिए अपेक्षित कंटेनर है जो डिफ़ॉल्ट रूप से दृश्य के el childViewContainer होता है जब तक कि एक childViewContainer सेट नहीं होता है।

सभी children को नष्ट कर रहा है

CollectionView एक destroy विधि destroy लागू करता है जो स्वचालित रूप से अपने बच्चों को नष्ट कर देता है और श्रोताओं को साफ करता है।

जब बच्चे नष्ट हो जाते हैं destroy:children और before:destroy:children घटनाओं को ट्रिगर करेगा।

और पढो:

CollectionView का childView

collection childView के बच्चों का प्रबंधन करने के लिए collection का उपयोग करते समय, अपने CollectionView childView लिए एक childView निर्दिष्ट करें। यह बैकबोन व्यू क्लास की परिभाषा होनी चाहिए, उदाहरण के लिए नहीं। यह Marbette's View और CollectionView दोनों सहित किसी भी Backbone.View से संबंधित वर्ग हो सकता है।

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

const MyChildView = View.extend({});

const MyCollectionView = CollectionView.extend({
  childView: MyChildView
});

त्रुटियां यदि आप childView निर्दिष्ट नहीं करते हैं, तो एक अपवाद यह कहते हुए फेंक दिया जाएगा कि आपको childView निर्दिष्ट करना होगा।

आप childView को एक फ़ंक्शन के रूप में भी परिभाषित कर सकते हैं। इस रूप में, इस विधि द्वारा लौटाया गया मूल्य ChildView वर्ग है जिसे तुरंत शुरू किया जाएगा जब एक Model को शुरू में प्रस्तुत करना होगा। यह विधि आपको प्रति Model ChildViews को अनुकूलित करने की सुविधा भी देती है।

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

const FooView =View.extend({
  template: _.template('foo')
});

const BarView = View.extend({
  bar
});

const MyCollectionView = CollectionView.extend({
  collection: new Backbone.Collection(),
  childView(item) {
    // Choose which view class to render,
    // depending on the properties of the item model
    if  (item.get('isFoo')) {
      return FooView;
    }
    else {
      return BarView;
    }
  }
});

const collectionView = new MyCollectionView();

const foo = new Backbone.Model({
  isFoo: true
});

const bar = new Backbone.Model({
  isFoo: false
});

// Renders a FooView
collectionView.collection.add(foo);

// Renders a BarView
collectionView.collection.add(bar);

त्रुटियां यदि childView एक ऐसा फ़ंक्शन है जो दृश्य वर्ग को वापस नहीं करता है तो एक त्रुटि डाली जाएगी।

children निर्माण

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

buildChildView(child, ChildViewClass, childViewOptions){
  // build the final list of options for the childView class
  const options = _.extend({model: child}, childViewOptions);
  // create the child view instance
  const view = new ChildViewClass(options);
  // return it
  return view;
},

जब आपको अधिक जटिल बिल्ड की आवश्यकता होती है, तो इस पद्धति को ओवरराइड करें, लेकिन childView उपयोग childView यदि आपको यह निर्धारित करने की आवश्यकता है कि किस क्लास को तुरंत देखना है।

import _ from 'underscore';
import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';
import MyListView from './my-list-view';
import MyView from './my-view';

const MyCollectionView = CollectionView.extend({
  childView(child) {
    if (child.get('type') === 'list') {
      return MyListView;
    }

    return MyView;
  },
  buildChildView(child, ChildViewClass, childViewOptions) {
    const options = {};

    if (child.get('type') === 'list') {
      const childList = new Backbone.Collection(child.get('list'));
      options = _.extend({collection: childList}, childViewOptions);
    } else {
      options = _.extend({model: child}, childViewOptions);
    }

    // create the child view instance
    const view = new ChildViewClass(options);
    // return it
    return view;
  }
});

बच्चे को डेटा पास करना

ऐसे परिदृश्य हो सकते हैं, जहां आपको अपने बच्चे के प्रत्येक उदाहरण के लिए अपने माता-पिता के संग्रह दृश्य से डेटा पास करना होगा। ऐसा करने के लिए, एक ऑब्जेक्ट शाब्दिक के रूप में अपने संग्रह दृश्य पर एक childViewOptions परिभाषा प्रदान करें। यह आपके चाइल्ड व्यू के कंस्ट्रक्टर को options हिस्से के रूप में दिया जाएगा।

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

const ChildView = View.extend({
  initialize(options) {
    console.log(options.foo); // => "bar"
  }
});

const MyCollectionView = CollectionView.extend({
  childView: ChildView,

  childViewOptions: {
    foo: 'bar'
  }
});

यदि आप रनटाइम पर लौटने के लिए मानों की गणना करने की आवश्यकता है, तो आप childViewOptions को एक फ़ंक्शन के रूप में भी निर्दिष्ट कर सकते हैं। childViewOptions गणना करते समय मॉडल को उस फ़ंक्शन में पारित किया जाना चाहिए जिसे आपको इसकी आवश्यकता होनी चाहिए। फ़ंक्शन को एक ऑब्जेक्ट वापस करना होगा, और ऑब्जेक्ट की विशेषताओं को childView इंस्टेंस के विकल्पों में कॉपी किया जाएगा।

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  childViewOptions(model) {
    // do some calculations based on the model
    return {
      foo: 'bar'
    };
  }
});

CollectionView का emptyView

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

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

const MyEmptyView = View.extend({
  template: _.template('Nothing to display.')
});

const MyCollectionView = CollectionView.extend({
  // ...

  emptyView: MyEmptyView
});

CollectionView का getEmptyRegion

जब एक CollectionView emptyView यह emptyView दिखाने के लिए एक क्षेत्र बनाता है। इस क्षेत्र को getEmptyRegion विधि का उपयोग करके अनुरोध किया जा सकता है। क्षेत्र CollectionView साथ el को साझा करेगा और उसे replaceElement: false साथ दिखाया गया है replaceElement: false

नोट CollectionView दृश्य क्षेत्र के प्रबंधन की एकमात्र इकाई होने की उम्मीद करता है। इस क्षेत्र में चीजों को सीधे दिखाने की सलाह नहीं दी जाती है।

const isEmptyShowing = myCollectionView.getEmptyRegion().hasView();

यह क्षेत्र EmptyView क्षेत्र की घटनाओं से निपटने के लिए उपयोगी हो सकता है।

emptyView डेटा पास करना

childView और childViewOptions समान, एक emptyViewOptions प्रॉपर्टी है जिसे emptyView कंस्ट्रक्टर को पास किया जाएगा। इसे ऑब्जेक्ट शाब्दिक या फ़ंक्शन के रूप में प्रदान किया जा सकता है।

यदि emptyViewOptions प्रदान नहीं किए जाते हैं, तो CollectionView childViewOptions को childViewOptions लिए डिफ़ॉल्ट होगा।

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

const EmptyView = View.extend({
  initialize(options){
    console.log(options.foo); // => "bar"
  }
});

const MyCollectionView = CollectionView.extend({
  emptyView: EmptyView,

  emptyViewOptions: {
    foo: 'bar'
  }
});

परिभाषित करना जब कोई emptyView दिखाता है

यदि आप खाली दृश्य प्रदान करने पर नियंत्रण करना चाहते हैं, तो आप ओवरराइड कर सकते हैं:

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  isEmpty() {
    // some logic to calculate if the view should be rendered as empty
    return this.collection.length < 2;
  }
});

!this.children.length रिटर्न का डिफ़ॉल्ट कार्यान्वयन !this.children.length

खाली दृश्य दिखाए जाने पर आप यह निर्धारित करने के लिए इस विधि का उपयोग कर सकते हैं:

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  // ...
  onRenderChildren() {
    if (this.isEmpty()) { console.log('Empty View Shown'); }
  }
});

बाल दृश्य तक पहुँचना

आप कई तरीकों से एक दृश्य प्राप्त कर सकते हैं। यदि findBy * विधि दृश्य नहीं ढूँढ सकती है, तो वह undefined वापस आ जाएगी।

ध्यान दें कि बच्चे प्रस्तुत किए गए विचारों का प्रतिनिधित्व करते हैं या दृश्य के el भीतर संलग्न होंगे।

संग्रह findByCid children : findByCid

इसे cid द्वारा देखें।

const bView = myCollectionView.children.findByCid(buttonView.cid);

कलेक्शन findByModel children का: findByModel

मॉडल द्वारा एक दृश्य का पता लगाएं।

const bView = myCollectionView.children.findByModel(buttonView.model);

कलेक्शन findByModelCid children का: findByModelCid

मॉडल सिड द्वारा एक दृश्य का पता लगाएं।

const bView = myCollectionView.children.findByModelCid(buttonView.model.cid);

कलेक्शन findByIndex children का: findByIndex

संख्यात्मक सूचकांक (अस्थिर) द्वारा खोजें

const bView = myCollectionView.children.findByIndex(0);

संग्रह findIndexByView children : findIndexByView

बच्चों के अंदर दृश्य का सूचकांक खोजें

const index = myCollectionView.children.findIndexByView(bView);

संग्रह दृश्य children Iterators और संग्रह कार्य

कंटेनर ऑब्जेक्ट पुनरावृत्तियों और अन्य संग्रह कार्यों को प्रदान करने के लिए, Underscore.js से कई कार्य उधार लेता है:

इन तरीकों को सीधे कंटेनर पर बुलाया जा सकता है, कंटेनर द्वारा रखे गए विचारों को पुनरावृत्त करने और संसाधित करने के लिए।

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const collectionView = new CollectionView({
  collection: new Backbone.Collection()
});

collectionView.render();

// iterate over all of the views and process them
collectionView.children.each(function(childView) {
  // process the `childView` here
});

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

अपने children में कौन सी घटनाओं को ट्रिगर किया जाता है, इसके आधार पर CollectionView कार्रवाई कर सकता है।

और पढो:

स्वयं प्रबंधित children

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

बाल दृश्य जोड़ना

addChildView पद्धति का उपयोग आपके Backbone.Collection से स्वतंत्र होने वाले दृश्य को जोड़ने के लिए किया जा सकता है। यह विधि दो मापदंडों को लेती है, बच्चे को देखने का उदाहरण और वैकल्पिक रूप से सूचकांक के लिए जहां उसे संग्रह दृश्य के children भीतर रखा जाना चाहिए। यह जोड़ा दृश्य लौटाता है।

import { CollectionView } from 'backbone.marionette';
import ButtonView from './button-view';

const MyCollectionView = CollectionView.extend({
  onRender() {
    View = new ButtonView();
    this.addChildView(buttonView, this.children.length);
  }
});

const myCollectionView = new MyCollectionView();

myCollectionView.render();

नोट जब तक कोई इंडेक्स निर्दिष्ट नहीं किया जाता है, यह जोड़ा गया दृश्य फ़िल्टरिंग और सॉर्टिंग के अधीन होगा और जटिल परिस्थितियों में प्रबंधन करना मुश्किल हो सकता है। देखभाल के साथ उपयोग करें।

बाल दृश्य निकालना

यदि आप व्यू CollectionView को प्रभावित किए बिना CollectionView व्यू से किसी दृश्य को हटाने और नष्ट करने की आवश्यकता है, तो removeChildView विधि उपयोगी है। ज्यादातर मामलों में यह निर्धारित करने के लिए डेटा का उपयोग करना बेहतर है कि CollectionView को क्या प्रदर्शित करना चाहिए।

यह विधि अपने पैरामीटर के रूप में हटाने के लिए बच्चे को देखने के उदाहरण को स्वीकार करती है। यह हटाए गए दृश्य को वापस करता है;

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  onChildViewFooEvent(childView, model) {
    // NOTE: we must wait for the server to confirm
    // the destroy PRIOR to removing it from the collection
    model.destroy({wait: true});

    // but go ahead and remove it visually
    this.removeChildView(childView);
  }
});

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

यह विधि removeChildView रूप में removeChildView के समान है कि हटाया गया दृश्य नष्ट नहीं हुआ है।

स्वैपिंग बाल दृश्य

CollectionView दृश्य children में और el में दो विचारों का स्थान स्वैप करें। यह तब उपयोगी हो सकता है जब छांटना मनमाना हो या प्रदर्शन करने वाला न हो।

त्रुटियाँ यदि दोनों में से कोई भी दृश्य CollectionView दृश्य का हिस्सा नहीं है, तो एक त्रुटि डाली जाएगी।

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

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

const collection = new Backbone.Collection([
  { name: 'first' },
  { name: 'middle' },
  { name: 'last' }
]);

const myColView = new CollectionView({
  collection: collection,
  childView: MyChildView
});

myColView.swapChildViews(myColView.children.first(), myColView.children.last());

myColView.children.first().model.get('name'); // "last"
myColView.children.last().model.get('name'); // "first"

children छाँट रहे children

sort करने का तरीका CollectionView viewComparator children माध्यम से फ़िल्टर करने से पहले लूप करेगा और उन्हें viewComparator साथ सॉर्ट करेगा। डिफ़ॉल्ट रूप से, अगर एक viewComparator सेट नहीं है, तो CollectionView में मॉडल के आदेश से CollectionView विचारों को सॉर्ट करेगा। यदि false दृश्य के लिए सेट छँटाई अक्षम हो जाएगा।

इस पद्धति को आंतरिक रूप से कहा जाता है जब रेंडरिंग और sort और before:sort इवेंट ट्रिगर होंगे।

डिफ़ॉल्ट रूप से CollectionView DOM में संग्रहित क्रम को बनाए रखेगा। यह व्यवहार प्रारंभ में {sortWithCollection: false} निर्दिष्ट करके अक्षम किया जा सकता है।

viewComparator को परिभाषित करना

यदि आप चाहते हैं कि आपके CollectionView के बच्चे अंतर्निहित बैकबोन संग्रह उपयोगों की तुलना में भिन्न प्रकार के क्रम के साथ प्रस्तुत किए जा viewComparator तो viewComparator एक कस्टम viewComparator विकल्प की अनुमति देता है।

import { CollectionView } from 'backbone.marionette';

const myCollectionView = new CollectionView({
  collection: someCollection,
  viewComparator: 'otherFieldToSortOn'
});
import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const myCollection = new Backbone.Collection([
  { id: 1 },
  { id: 4 },
  { id: 3 },
  { id: 2 }
]);

myCollection.comparator = 'id';

const mySortedColView = new CollectionView({
  //...
  collection: myCollection
});

const myUnsortedColView = new CollectionView({
  //...
  collection: myCollection,
  viewComparator: false
});

mySortedColView.render(); // 1 4 3 2
myUnsortedColView.render(); // 1 4 3 2

myCollection.sort();
// mySortedColView auto-renders 1 2 3 4
// myUnsortedColView has no change

viewComparator किसी भी स्वीकार्य Backbone.Collection तुलनित्र प्रारूप को ले सकता है - एक सॉर्टबी (एक फ़ंक्शन जो एक तर्क लेता है), एक सॉर्ट के रूप में (एक तुलनित्र फ़ंक्शन पास करें जो दो तर्कों की अपेक्षा करता है), या एक स्ट्रिंग के रूप में विशेषता का संकेत देता है। इसके अनुसार क्रमबद्ध करें।

getComparator

यह देखने के लिए कि कौन से viewComparator का उपयोग करना है, इस पद्धति को ओवरराइड करें।

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  sortAsc(model) {
    return -model.get('order');
  },
  sortDesc(model) {
    return model.get('order');
  },
  getComparator() {
    // The collectionView's model
    if (this.model.get('sorted') === 'ASC') {
      return this.sortAsc;
    }

    return this.sortDesc;
  }
});

setComparator

setComparator विधि CollectionView के viewComparator विशेषता और पुनः-प्रकार को संशोधित करती है। विकल्प तर्क में { preventRender: true } , व्यू को रेंडर होने से रोकेगा।

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

// Note: the setComparator is preventing the automatic re-render
cv.setComparator('orderBy', { preventRender: true });

// Render the children ordered by the orderBy attribute
cv.render();

removeComparator

यह फ़ंक्शन वास्तव में setComparator(null, options) का एक उपनाम है। यह तुलनित्र को हटाने के लिए उपयोगी है। removeComparator भी एक विकल्प के रूप में preventRender को स्वीकार करता है।

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

cv.setComparator('orderBy');

//Remove the current comparator without rendering again.
cv.removeComparator({ preventRender: true });

collection की तरह बनाए रखना

डिफ़ॉल्ट रूप से CollectionView DOM में संग्रहित क्रम को बनाए रखेगा। इस व्यवहार को निर्दिष्ट करके {sortWithCollection: false} को इनिशियलाइज़ या {sortWithCollection: false} निर्दिष्ट करके अक्षम किया जा सकता है।

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const myCollection = new Backbone.Collection([
  { id: 1 },
  { id: 4 },
  { id: 3 },
  { id: 2 }
]);

myCollection.comparator = 'id';

const mySortedColView = new CollectionView({
  //...
  collection: myCollection
});

const myUnsortedColView = new CollectionView({
  //...
  collection: myCollection,
  sortWithCollection: false
});

mySortedColView.render(); // 1 4 3 2
myUnsortedColView.render(); // 1 4 3 2

myCollection.sort();
// mySortedColView auto-renders 1 2 3 4
// myUnsortedColView has no change

children छानना

filter विधि CollectionView viewFilter क्रमबद्ध children माध्यम से लूप करेगी और उन्हें viewFilter विरुद्ध परीक्षण viewFilter viewFilter को पास करने वाले viewFilter को यदि आवश्यक हो तो संग्रह दृश्य में संलग्न किया जाता है और जो दृश्य फ़िल्टर किए जाते हैं उन्हें अलग कर दिया जाएगा। फ़िल्टर करने के बाद children को केवल संलग्न करने के लिए विचार होंगे।

यदि कोई viewFilter filter before:filter और before:filter मौजूद है before:filter ईवेंट ट्रिगर हो जाएगा।

डिफ़ॉल्ट रूप से संग्रह दृश्य बदल जाने पर या संग्रह दृश्य क्रमबद्ध होने पर फिर से दिखाई देगा।

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

viewFilter को परिभाषित करना

यदि आप कुछ अंतर्निहित children को DOM से संलग्न होने से रोकना चाहते हैं, तो CollectionView viewFilter कस्टम viewFilter विकल्प की अनुमति देता है। viewFilter एक फ़ंक्शन हो सकता है, ऑब्जेक्ट को viewFilter कर सकता है। या स्ट्रिंग।

यदि त्रुटियाँ ViewFilter इन विकल्पों में से एक नहीं है, तो त्रुटियां ViewFilter

एक समारोह के रूप में देखें

viewFilter फ़ंक्शन children से एक दृश्य लेता है और एक सत्य मान देता है यदि बच्चा संलग्न होना चाहिए, और यदि नहीं होना चाहिए तो एक गलत मूल्य।

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  childView: SomeChildView,
  emptyView: SomeEmptyView,
  collection: new Bb.Collection([
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 }
  ]),

  // Only show views with even values
  viewFilter(view, index, children) {
    return view.model.get('value') % 2 === 0;
  }
});

// renders the views with values '2' and '4'
cv.render();

एक विधेय वस्तु के रूप में देखें

viewFilter विधेय वस्तु दृश्य के मॉडल विशेषताओं के विरुद्ध फ़िल्टर करेगी।

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  childView: SomeChildView,
  emptyView: SomeEmptyView,
  collection: new Bb.Collection([
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 }
  ]),

  // Only show views with value 2
  viewFilter: { value: 2 }
});

// renders the view with values '2'
cv.render();

एक स्ट्रिंग के रूप में देखें

viewFilter स्ट्रिंग दृश्य के मॉडल विशेषता का प्रतिनिधित्व करता है और viewFilter मूल्यों को फ़िल्टर करेगा।

import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  childView: SomeChildView,
  emptyView: SomeEmptyView,
  collection: new Bb.Collection([
    { value: 0 },
    { value: 1 },
    { value: 2 },
    { value: null },
    { value: 4 }
  ]),

  // Only show views 1,2, and 4
  viewFilter: 'value'
});

// renders the view with values '1', '2', and '4'
cv.render();

getFilter

इस फ़ंक्शन को प्रोग्रामेटिक रूप से यह तय करने के लिए ओवरराइड करें कि filter viewFilter जाने पर किस viewFilter का उपयोग करना है।

import { CollectionView } from 'backbone.marionette';

const MyCollectionView = CollectionView.extend({
  summaryFilter(view) {
    return view.model.get('type') === 'summary';
  },
  getFilter() {
    if (this.collection.length > 100) {
      return this.summaryFilter;
    }
    return this.viewFilter;
  }
});

setFilter

setFilter विधि, CollectionView viewFilter विशेषता और फ़िल्टर को संशोधित करती है। विकल्प तर्क में { preventRender: true } , व्यू को रेंडर होने से रोकेगा।

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

const newFilter = function(view, index, children) {
  return view.model.get('value') % 2 === 0;
};

// Note: the setFilter is preventing the automatic re-render
cv.setFilter(newFilter, { preventRender: true });

//Render the new state of the ChildViews instead of the whole DOM.
cv.render();

removeFilter

यह फ़ंक्शन वास्तव में setFilter(null, options) का एक उपनाम है। यह फिल्टर हटाने के लिए उपयोगी है। removeFilter भी एक विकल्प के रूप में preventRender को स्वीकार करता है।

import { CollectionView } from 'backbone.marionette';

const cv = new CollectionView({
  collection: someCollection
});

cv.render();

cv.setFilter(function(view, index, children) {
  return view.model.get('value') % 2 === 0;
});

//Remove the current filter without rendering again.
cv.removeFilter({ preventRender: true });