Soru backbone.js'yi el ile dinamik olarak atamak için uygun yol


Her biri farklı el özelliklerine sahip iki (veya daha fazla) görünüm örneği oluşturmak ve backbone.js görünümünün etkinlik karması (jQuery ile değil) aracılığıyla onlara bağlı etkinliklere sahip olmak istiyorum.

Tüm örneklemeler aynı olduğunda tetiklenecek olayları alma el kolay:

someView = Backbone.View.extend({
  el: '#someDiv',

  events: {
    'click': 'someFunction'
  },

  someFunction: function(){
    //Do something here
  }
});

Şimdiye kadar atarsam el içinde initialize işlev ve ayarlanmış events normal olarak aşağıdaki gibi olaylar tetiklenmez:

someView = Backbone.View.extend({
  events: {
    'click': 'someFunction'
  },

  initialize: function( options ){
    this.el = options.el
  },

  someFunction: function(){
    //Do something here
  }
});

İlk içgüdü benim el ilgili dom öğesinin dize temsilini döndüren bir işlev olsun:

someView = Backbone.View.extend({
  el: function(){
    return '#someDiv-' + this.someNumber
  },

  events: {
    'click': 'someFunction'
  },

  initialize: function( options ){
    this.someNumber = options.someNumber
  },

  someFunction: function(){
    //Do something here
  }
});

Ancak, bu tetikleyiciler someFunction x kere var ise x kere someView.

Sonra ikisini de el ve events içindeki özellikler initialize:

someView = Backbone.View.extend({

  initialize: function( options ){
    this.el = options.el
    this.events = {
      'click': 'someFunction'
    }
  },

  someFunction: function(){
    //Do something here
  }
});

ama bu olayları tetiklemiyor. Bu noktada oldukça fazla balık tutuyorum.

Herkes bir backbone.js görünümünü anında nasıl oluşturacağını biliyor mu? el Bu örneğe özgü olan, yalnızca bu örnek için tetikleyen ve diğer View?


25
2018-06-26 15:12


Menşei




Cevaplar:


Aslında bu "tüm" şeylerin içinden geçmene gerek yok.

Omurga otomatik olarak görünümün "el" ini kurucuya ilettiğiniz "el" e ayarlar.

Bu görünüm boyunca "this.el" olarak kullanılabilir.

Yapmanız gereken tek şey bu:

x = Backbone.View.extend({
    events: {
      'click': 'say_hi'
    },

    initialize: function( options ){
        // Not actually needed unless you're doing something else in here
    },

    say_hi: function(){
      alert( this.el.id );
    }

  });

y = new x( {el: '#div-1'} );
z = new x( {el: '#div-2'} );

z.say_hi();
y.say_hi();
​

Bu canlı jsFiddle bakın: http://jsfiddle.net/edwardmsmith/QDFwf/15/

İkinci örneğinizin çalışmadığının nedeni, Backbone'un en son sürümleriyle, "el" i doğrudan daha fazla ayarlayamaz. Bu, fark ettiğiniz gibi olayları düzgün şekilde ayarlamaz / günceller.

Çalışmıyor

initialize: function( options ){
  this.el = options.el;
}

Elinizi bu şekilde dinamik olarak ayarlamak isterseniz, kullanmanız gerekir. View.setElement Bu, olayları doğru bir şekilde delege eder ve önbelleğe alır Bu. $ el.

Eserleri

initialize: function( options ){
  this.setElement(options.el)
}

İkinci örneğinizin canlı jsfiddle: http://jsfiddle.net/edwardmsmith/5Ss5G/21/

Ama bu sadece omurga altında omurganın altında ne yapıldığını yeniden yapıyor.


52
2018-06-26 15:41



Teşekkür ederim Edward. - kikuchiyo
@EdwardMSmith lütfen bilmeceleri güncelleyin, çalışmıyorlar ... - chris Frisina
Iki jsfiddles github yerine CDNjs alt çizgi ve omurgayı kaynak için güncellendi. Gördüğün sorun buydu. - Edward M Smith
Teşekkürler, bu benim için harika çalışıyor! - Aasha joney