Cara meneruskan parameter ke tampilan

93

Saya memiliki serangkaian tombol yang ketika diklik menampilkan menu popup yang diposisikan tepat di bawah tombol. Saya ingin meneruskan posisi tombol ke tampilan. Bagaimana saya bisa melakukan itu?

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?
    }
});
vikmalhotra.dll
sumber

Jawaban:

168

Anda hanya perlu meneruskan parameter ekstra saat membuat MenuView. Tidak perlu menambahkan initializefungsi.

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

Dan kemudian, masuk MenuView, Anda bisa menggunakan this.options.position.

PEMBARUAN: Karena @mu adalah status yang terlalu pendek , sejak 1.1.0, Tampilan Backbone tidak lagi secara otomatis melampirkan opsi yang diteruskan ke konstruktor sebagai opsi ini, tetapi Anda dapat melakukannya sendiri jika diinginkan.

Jadi dalam initializemetode Anda, Anda dapat menyimpan optionspass sebagai this.options:

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

atau gunakan beberapa cara yang lebih baik seperti yang dijelaskan oleh @Brave Dave .

dira
sumber
1
Ini bekerja dengan sempurna, cukup tambahkan parameter dalam metode inisialisasi tampilan Anda: inisialisasi: function (options) {alert (options.position); }
Cabuxa.Mapache
@ Cabuxa.Mapache Tidak, itu tidak bekerja. Jawaban ini menggunakan this.options.position, tidak options.position. Tampilan digunakan untuk melampirkan initializeargumen this.optionstetapi itu berhenti terjadi di 1.1.0.
mu terlalu pendek
46

Tambahkan argumen opsi ke initialize:

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

Dan kemudian berikan beberapa opsi saat Anda membuat tampilan:

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

Untuk informasi lebih lanjut: http://backbonejs.org/#View-constructor

mu terlalu pendek
sumber
ini lebih elegan / sederhana untuk sebagian besar situasi.
Cullen SUN
@CullenSUN: Terima kasih. Saya lebih suka kesaktian dari pendekatan ini, penggunaan "tindakan dari jarak jauh" yang ajaib this.optionsmemberi saya mimpi buruk pemeliharaan dan debugging.
mu terlalu pendek
Saya melihat tautan Backbone terlebih dahulu tetapi contoh Anda menjelaskannya kepada saya. Terima kasih
Manuel Hernandez
Ini sudah usang, dan Anda tidak dapat lagi menggunakanthis.options
Perjalanan
4
@Perjalanan: Hah? initialize: function(options) { ... }baik-baik saja, perubahannya adalah bahwa Backbone tidak lagi secara otomatis disetel this.optionsuntuk Anda: "Tampilan Backbone tidak lagi secara otomatis melampirkan opsi yang diteruskan ke konstruktor sebagai this.options, tetapi Anda dapat melakukannya sendiri jika Anda mau." .
mu terlalu pendek
12

Sejak backbone 1.1.0, optionsargumen tersebut tidak lagi dilampirkan secara otomatis ke tampilan (lihat masalah 2458 untuk diskusi). Anda sekarang perlu melampirkan opsi dari setiap tampilan secara manual:

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

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

Sebagai alternatif, Anda dapat menggunakan plugin mini ini untuk melampirkan otomatis opsi daftar putih, seperti:

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

lulus dari lokasi lain

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

Tambahkan argumen opsi untuk diinisialisasi dalam tampilan Anda mendapatkan variabel yang diteruskan,

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

untuk mendapatkan nilai guna -

   var v = new ItemView({ pos: this.options.positions});
Imtiaz Mirza
sumber
5
tulis jawaban yang lebih baik, bukan kolektif.
Konga Raju
Ini adalah jawaban yang lebih baik!
Imtiaz Mirza
-2

Gunakan this.options untuk mengambil argumentr dalam tampilan

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

Contoh Kerja: http://jsfiddle.net/Cpn3g/1771/

Nishant Kumar
sumber