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.