कैसे एक दृश्य के मापदंडों को पारित करने के लिए

Question

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

ItemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click': 'showMenu'
    },
    initialize: function() {
        _.bindAll(this, 'render');
    },
    render: function() {
    return $(this.el).html(this.model.get('name'));
    },
    showMenu: function() {
        var itemColl = new ItemColl();
        new MenuView({collection: itemColl}); // how to pass the position of menu here?
    }
});

Answer 1

जब आप मेनू दृश्य का निर्माण करते हैं तो आपको अतिरिक्त पैरामीटर पास करने की आवश्यकता होती है। initializeफ़ंक्शन जोड़ने की कोई आवश्यकता नहीं है ।

new MenuView({
  collection: itemColl,
  position: this.getPosition()
})

और फिर, में MenuView, आप उपयोग कर सकते हैं this.options.position।

अद्यतन करें: जैसा कि @mu बहुत छोटा राज्य है , १.१.० के बाद से, बैकबोन व्यू अब कंस्ट्रक्टर को दिए गए विकल्पों को स्वचालित रूप से संलग्न नहीं करता है क्योंकि आप इसे पसंद करते हैं, लेकिन आप इसे स्वयं कर सकते हैं।

अपने में तो initializeविधि, आप को बचा सकता है optionsके रूप में पारित this.options:

initialize: function(options) {
    this.options = options;
    _.bindAll(this, 'render');
},

या @Brave डेव द्वारा वर्णित कुछ महीन तरीकों का उपयोग करें ।

Comments

यह अब 1.1.0 के रूप में काम नहीं करता है: "बैकबोन व्यू अब निर्माणकर्ता को दिए गए विकल्पों को स्वचालित रूप से संलग्न नहीं करता है this.options, लेकिन यदि आप चाहें तो आप इसे स्वयं कर सकते हैं।" ।

— म्यू बहुत छोटा है

यह पूरी तरह से काम करता है, बस पैरामीटर को अपने दृष्टिकोण में जोड़ें प्रारंभिक विधि: प्रारंभ करें: फ़ंक्शन (विकल्प) {चेतावनी (विकल्प.पोजिशन); }

— कैबक्सा.पाचे

@ Cabuxa.Mapache नहीं, यह काम नहीं करता है। यह उत्तर उपयोग करता है this.options.position, नहीं options.position। व्यूज initializeतर्कों को संलग्न करते थे, this.optionsलेकिन 1.1.0 में ऐसा होना बंद हो गया।

— म्यू बहुत छोटा है

Answer 2

इसमें एक विकल्प तर्क जोड़ें initialize:

initialize: function(options) {
    // Deal with default options and then look at options.pos
    // ...
},

और जब आप अपना दृश्य बनाते हैं तो कुछ विकल्पों में पास होते हैं:

var v = new ItemView({ pos: whatever_it_is});

अधिक जानकारी के लिए: http://backbonejs.org/#View-constructor

Comments

यह अधिकांश स्थितियों के लिए अधिक सुरुचिपूर्ण / सरल है।

— कुलेन सन

@CullenSUN: धन्यवाद। मैं इस दृष्टिकोण के गवाह को पसंद करता हूं, उपयोग करने की जादुई "कार्रवाई दूरी" this.optionsमुझे रखरखाव और डिबगिंग बुरे सपने देता है।

— म्यू बहुत छोटा है

मैंने बैकबोन लिंक को पहले देखा था लेकिन आपके उदाहरण ने इसे मेरे लिए स्पष्ट कर दिया। धन्यवाद

— मैनुअल हर्नांडेज़

यह पदावनत किया गया है, और आप कर सकते हैं अब उपयोगthis.options

— Trip

@ पट्टी: हुह? initialize: function(options) { ... }बस ठीक है, परिवर्तन यह है कि बैकबोन अब this.optionsआपके लिए स्वचालित रूप से सेट नहीं होता है : "बैकबोन व्यू अब स्वचालित रूप से कंस्ट्रक्टर को दिए गए विकल्पों को संलग्न नहीं करता है this.options, लेकिन यदि आप चाहें तो आप इसे स्वयं कर सकते हैं।" ।

— म्यू

Answer 3

1.1.0 बैकबोन के रूप में, optionsतर्क अब दृश्य से स्वचालित रूप से जुड़ा नहीं है ( चर्चा के लिए 2458 जारी करें देखें )। अब आपको मैन्युअल रूप से प्रत्येक दृश्य के विकल्प संलग्न करने की आवश्यकता है:

MenuView = Backbone.View.extend({
    initialize: function(options) {
        _.extend(this, _.pick(options, "position", ...));
    }
});

new MenuView({
    collection: itemColl,
    position: this.getPosition(),
    ...
});

वैकल्पिक रूप से आप इस मिनी प्लगइन का उपयोग श्वेत-सूचीबद्ध विकल्पों को ऑटो-अटैच करने के लिए कर सकते हैं , जैसे:

MenuView = Backbone.View.extend({
    options : ["position", ...] // options.position will be copied to this.position
});

Answer 4

अन्य स्थान से गुजरना

 new MenuView({
   collection: itemColl,
   position: this.getPosition()
})

आरंभिक चर को देखते हुए विकल्प तर्क जोड़ें

initialize: function(options) {
   // Deal with default options and then look at options.pos
   // ...
},

मूल्य उपयोग प्राप्त करने के लिए -

   var v = new ItemView({ pos: this.options.positions});

Comments

सामूहिक नहीं सुधरे हुए उत्तर लिखें।

— कोंगा राजू

यह सुधरा हुआ उत्तर है!

— इम्तियाज मिर्जा

Answer 5

व्यूअर को देखने के लिए इसे अपनाने का उपयोग करें

 // Place holder
 <div class="contentName"></div>

 var showNameView = Backbone.View.extend({
        el:'.contentName',
        initialize: function(){
            // Get name value by this.options.name
            this.render(this.options.name);
        },
        render: function(name){
            $('.contentName').html(name);
        }
    });

    $(document).ready(function(){
        // Passing name as argument to view
        var myName1 = new showNameView({name: 'Nishant'});
    });

काम करने का उदाहरण: http://jsfiddle.net/Cpn3g/1771/