Bir görünüme parametreler nasıl aktarılır


93

Tıklandığında, düğmenin hemen altına yerleştirilmiş bir açılır menüyü görüntüleyen bir dizi düğmem var. Düğmenin konumunu görünüme geçirmek istiyorum. Bunu nasıl yapabilirim?

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

Yanıtlar:


168

MenuView'ü oluştururken sadece ekstra parametreyi iletmeniz gerekir. initializeİşlevi eklemeye gerek yok .

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

Ve sonra, içinde MenuViewkullanabilirsiniz this.options.position.

GÜNCELLEME: As @mu çok kısa devletler ise 1.1.0 beri, Omurga Görüntüleme artık otomatik this.options olarak yapıcı aktarılan seçenekleri takmak, ancak isterseniz bunu kendiniz yapabilirsiniz.

Senin Yani initializeyöntemle, kaydedebilirsiniz optionsolarak geçirilen this.options:

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

veya @Brave Dave tarafından açıklandığı gibi bazı daha ince yöntemler kullanın .



1
Bu mükemmel çalışır, sadece parametreyi görünümünüze ekleyin başlatma yöntemine: initialize: function (options) {alert (options.position); }
Cabuxa.Mapache

@ Cabuxa.Mapache Hayır, çalışmıyor. Bu cevap kullanır this.options.position, değil options.position. initializeArgümanları eklemek için kullanılan görünümler 1.1.0'da this.optionsartık durdu.
mu çok kısa

46

Aşağıdakilere bir seçenekler bağımsız değişkeni ekleyin initialize:

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

Ardından, görünümünüzü oluştururken bazı seçenekleri iletin:

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

Daha fazla bilgi için: http://backbonejs.org/#View-constructor


bu çoğu durumda daha zarif / basittir.
Cullen SUN

@CullenSUN: Teşekkürler. Bu yaklaşımın açıklığını tercih ediyorum, kullanmanın sihirli "uzaktan eylemi" this.optionsbana bakım ve hata ayıklama kabusları veriyor.
mu çok kısa

Önce Backbone bağlantısını gördüm, ancak örneğiniz benim için açıklığa kavuşturdu. Teşekkürler
Manuel Hernandez

Bu kullanımdan kaldırıldı ve artık kullanamazsınızthis.options
Gezisi

4
@Trip: Huh? initialize: function(options) { ... }Sorun değil, değişiklik şu ki, Backbone artık this.optionssizin için otomatik olarak ayarlanmıyorthis.options : "Omurga Görünümleri artık yapıcıya aktarılan seçenekleri otomatik olarak eklemiyor , ancak isterseniz kendiniz yapabilirsiniz. .
mu çok kısa

12

1.1.0 omurgasından itibaren, optionsargüman artık görünüme otomatik olarak eklenmez (tartışma için 2458 numaralı konuya bakın ). Şimdi her görünümün seçeneklerini manuel olarak eklemeniz gerekiyor:

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

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

Alternatif olarak, beyaz listedeki seçenekleri otomatik olarak eklemek için bu mini eklentiyi kullanabilirsiniz , örneğin:

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

-1

başka bir yerden geçmek

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

Geçirilen değişkeni aldığınız görünümü başlatmak için bir seçenekler argümanı ekleyin,

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

değer kullanımı elde etmek için -

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

5
toplu değil geliştirilmiş cevaplar yazın.
Konga Raju

Bu geliştirilmiş cevaptır!
Imtiaz Mirza

-2

Görünümde argumentr almak için this.options kullanın

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

Çalışma Örneği: http://jsfiddle.net/Cpn3g/1771/

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.