Backbone.js iç içe geçmiş görünümlerdeki olaylar

Question

Birden çok WidgetView s örneğini başlatan DashboardView adlı bir görünüm var. Her widget'ın kendi etkinlik bağlantılarına sahip olması gerekir. Şimdiye kadar söyleyebilirim, yani görünümü, render ve ebeveyn görünümüne eklendiğinde bu bağlamaları kaybolmak:

class DashboardView extends Backbone.View 
    constructor: -> 
    context = @ 
    _.each @collection, (w)-> 
     dv = new app.WidgetView(model: w) 
     context.$el.append(dv.render()) 

class WidgetView extends Backbone.View 
    events: 
    "click .config" : "config_widget" 

    render: -> 
     _.template($("#widget-template").html(), @model) 

bu şekilde yaparak, widget .config elemana tıklama etkinlikleri kayıp şimdi . İç görünümleri ebeveynin içine karıştırmanın daha iyi bir yolu var mıdır, bu arada alt görünümdeki olay işleyicilerinin doğru şekilde yönlendirilmesini sağlamak mı?

Bu sorunla karşılaştığım bir çözüm, this article içeriyor. Bu doğru görünüyor, ama bunu çözmenin daha zarif bir yolu varsa merak ediyorum.

Answer 1

bu deneyin:

(1) WidgetView 'ın render yönteme içinde, sizinle @el (görüş kök öğesi) doldurmak onun modeli en:

class DashboardView extends Backbone.View 
    constructor: -> 
    @collection.each (w) => 
     dv = new app.WidgetView(model: w) 
     @$el.append dv.render().el // Append widget's @el explicitly 

class WidgetView extends Backbone.View 
    tagName: 'div' // or whatever your view's root element is 

    template: _.template $("#widget-template").html() // pre-compile template 

    events: 
    "click .config": "config_widget" 

    render: -> 
    @$el.html @template @model.toJSON() // append template to @el 
    return this // return view 

Yani fikri bu şablon üzerinden veri. (Ve ben şablonu derleme nasıl fark sadece bir kez - Her operasyon kılmak üzerine şablonu derlemek için gerek yoktur.)

(2) DashboardView İçinde, ekleme widget'inin kök öğesi - @el - DOM .

Görünümün olayları, kök öğesinin temsilcisi olan @el. Bu nedenle, kök öğesiyle açıkça çalışmak istersiniz: render içinde, onu doldurursunuz ve sonra DOM'a eklersiniz.

Answer 2

Sorununuz, delegateEvents, görünümünüz için tek, değişmeyen bir öğe olmasını bekliyor. render işleviniz her seferinde yeni bir öğe oluşturduğundan, render tarafından oluşturulan öğeye tıkladığınızda delegateEvents tarafından yapılan bağlamalar hiçbir zaman ateşlenmez.

Neyse ki Backbone'un geçerli sürümü, öğenizi sağladığınız argümanla yeniden atayacak olan setElement method sunar ve sonra otomatik olarak delegateEvents'u arayacaktır.