วิธีส่งพารามิเตอร์ไปยังมุมมอง


93

ฉันมีชุดปุ่มซึ่งเมื่อคลิกแล้วจะแสดงเมนูป๊อปอัพที่อยู่ด้านล่างปุ่ม ฉันต้องการส่งตำแหน่งของปุ่มไปยังมุมมอง ฉันจะทำเช่นนั้นได้อย่างไร?

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?
    }
});

คำตอบ:


168

คุณเพียงแค่ต้องส่งผ่านพารามิเตอร์พิเศษเมื่อคุณสร้าง MenuView ไม่จำเป็นต้องเพิ่มinitializeฟังก์ชั่น

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

จากนั้นในคุณสามารถใช้MenuViewthis.options.position

อัปเดต:เนื่องจาก@mu เป็นสถานะที่สั้นเกินไปตั้งแต่ 1.1.0 Backbone Views จะไม่แนบตัวเลือกที่ส่งผ่านไปยังตัวสร้างโดยอัตโนมัติอีกต่อไปตัวเลือกนี้ แต่คุณสามารถทำได้ด้วยตัวเองหากต้องการ

ดังนั้นในinitializeวิธีของคุณคุณสามารถบันทึกการoptionsส่งผ่านเป็นthis.options:

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

หรือใช้วิธีปลีกย่อยบางอย่างที่อธิบายโดย @Brave เดฟ



1
สิ่งนี้ทำงานได้อย่างสมบูรณ์เพียงเพิ่มพารามิเตอร์ในมุมมองของคุณเริ่มต้นวิธีการเริ่มต้น: initialize: function (ตัวเลือก) {alert (options.position); }
Cabuxa.Mapache

@ Cabuxa.Mapache ไม่มันไม่ทำงาน คำตอบนี้ใช้ไม่ได้this.options.position options.positionมุมมองที่ใช้ในการแนบinitializeอาร์กิวเมนต์this.optionsแต่หยุดเกิดขึ้นใน 1.1.0
สั้นเกินไป

46

เพิ่มอาร์กิวเมนต์ตัวเลือกใน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


นี่คือความหรูหรา / เรียบง่ายสำหรับสถานการณ์ส่วนใหญ่
Cullen SUN

@CullenSUN: ขอบคุณ ฉันชอบความชัดเจนของแนวทางนี้การใช้ "การกระทำในระยะไกล" ที่มีมนต์ขลังthis.optionsทำให้ฉันได้รับการบำรุงรักษาและแก้ไขฝันร้าย
สั้นเกินไป

ฉันเห็นลิงก์ Backbone ก่อน แต่ตัวอย่างของคุณให้ความกระจ่างแก่ฉัน ขอบคุณ
Manuel Hernandez

สิ่งนี้เลิกใช้แล้วและคุณไม่สามารถใช้งานได้อีกต่อไปthis.options
ทริป

4
@ ทริป: หือ? initialize: function(options) { ... }เป็นเรื่องปกติการเปลี่ยนแปลงก็คือ Backbone ไม่ได้ตั้งค่าthis.optionsให้คุณโดยอัตโนมัติอีกต่อไป: "Backbone Views จะไม่รวมตัวเลือกที่ส่งไปยังตัวสร้างโดยอัตโนมัติอีกต่อไปthis.optionsแต่คุณสามารถทำได้ด้วยตัวเองหากต้องการ" .
สั้นเกินไป

12

ในส่วนของกระดูกสันหลัง 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
});

-1

ผ่านจากสถานที่อื่น

 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});

5
เขียนคำตอบที่ปรับปรุงแล้วไม่ใช่แบบเหมารวม
Konga Raju

นี่คือคำตอบที่ดีขึ้น!
Imtiaz Mirza

-2

ใช้this.optionsเพื่อดึงข้อมูลอาร์กิวเมนต์ในมุมมอง

 // 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/

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.