itemView вызвать пользовательское событие, достигающих parrent

Question

У меня есть этот код http://jsfiddle.net/QRcF5/2/

$(function() { 
    var Header = Backbone.Marionette.ItemView.extend({ 
     template: _.template('<h4>TEST</h4><button>EDIT</button>'), 

     tagName: 'nav', 

     triggers: { 
      'click button': 'btn_clicked' 
     } 
    }), 
    Layout = Backbone.Marionette.Layout.extend({ 
     template: _.template('<header></header>'), 

     regions: { 
      header: 'header' 
     }, 

     events: { 
      'itemview:btn_clicked': 'clicked' 
     }, 

     clicked: function() { 
      alert('Ana are mere'); 
     } 
    }); 

    layout = new Layout(); 
    $('body').append(layout.render().el); 
    layout.header.show(new Header()); 
}); 

Я использую макет с одной ItemView (позже я хочу более сложную вложенности) и хотите, чтобы захватить в раскладке для события что происходит в ITEMVIEW. Кажется, что он не пузырится вверх, или я делаю что-то не так.

UPDATE 1 Я пробовал событие, триггера (для ребенка) и событие (для родителей), но я до сих пор не могу получить событие пойман внутри родителя.

можно использовать:

_.extend(App.vent, Backbone.Events); 

Backbone.Marionette.ItemView.extend({ 
    .... 
    App.vent.trigger('btn_clicked'); 
    .... 
}); 

Backbone.Marionette.Layout.extend({ 
    .... 
    App.vent.on('btn_clicked', function() { doCoding(); }); 
    .... 
}); 

Но этот путь я разорвать инкапсуляцию. Есть ли способ сохранить инкапсуляцию с помощью запуска триггеров Marionette и сохранить все это в макете и не загрязнять все приложение?

UPDATE 2

http://jsfiddle.net/QRcF5/5/

Я обновить jsfiddle использовать _.extend (вентиляционные, Backbone.Events). Если у кого-то есть лучший образец для этого, сообщите нам: D

Answer 1

Я нашел решение (похоронено где-то в документации делают некоторые связи между макетом, регион и вид)!

http://jsfiddle.net/QRcF5/6/

В контексте общения ТОЛЬКО между родителя (макет) и ребенок (itemView):

1) ребенок запускает пользовательский событие (в отличие от вентиляционного удлинения Backbone.Events - это только для тех, у кого есть доступ к нему = инкапсуляция)

triggers: { 
    'click button': 'custom_event:btn_clicked' 
} 

2) родитель слушать это событие , имеющего доступ к ребенку с на ('шоу', ....)

initialize: function() { 
    var that = this; // needed for the listenTo which overrides 'THIS' 

    this.header.on('show', function(view) { 
     this.listenTo(view, 'custom_event:btn_clicked', that.clicked); 
    }); 
}, 

Пример:

layout = new Layout(); 
$('body').append(layout.render().el); 
layout.header.show(new Header()); // Here we get access to child and its events 

(скрыто) мощность марионетки. (Я имею в виду, когда говорю скрытое, потому что, будучи относительно новым, документация является barebone и сложными примерами скудны).

С небольшим упорством все может быть достигнуто.

Answer 2

events: { 
      'itemview:btn': 'btn_clicked' 
     }, 

Элемент не на кличке. Необходимо указать фактический элемент DOM, как это:

events: { 
      'click .someThingWithAClass': 'myFunction' 
     }, 

Однако, если вы хотите слушать события, которые происходят дальше вниз по дорожке, вы, вероятно, следует просто придерживаться Jquery on метода. Это будет слушать все, что пузырь своего пути, независимо от того, пользовательского интерфейса, который был сформирован в то время, что эта точка зрения оказанной

http://api.jquery.com/on/

Answer 3

вы должны просто вернуться верно, и пусть щелчок пузырьком вверх в DOM см http://jsfiddle.net/aGaDY/:

var Header = Backbone.Marionette.ItemView.extend({ 
    template: _.template('<h4>TEST</h4><button>EDIT</button>'), 
    events: { 
    'click button': 'btn' 
    }, 
    btn: function() { 
    return true; 
    } 
}), 

Layout = Backbone.Marionette.Layout.extend({ 
    template: _.template('<div>Before:</div><header></header><div>After:</div><div class="body">Body Goes Here</div>'), 
    regions: { 
     header: 'header' 
    }, 
    events: { 
     'click': 'btn_clicked' 
    }, 
    btn_clicked: function() { 
     alert('Ana are mere'); 
    } 
}); 
layout = new Layout(); 
$('body').append(layout.render().el); 
layout.header.show(new Header()); 

Вы можете даже удалить обработку на ItemView укомплектовать событие, пузыриться поведение по умолчанию

EDIT:

Если вы хотите иметь возможность различать различные нажатия кнопок и предотвращать загрязнение глобального пространства внутренними событиями, которые не относятся к приложению, я могу представить два варианта.

Переместить данные о цели события с помощью функции данных Jquery и event.target:

// In Header 
bth:function(e){ 
    $(e.target).data("source", "myButton") 
} 
// .... 
// in the Layout 
btn_click: function(e){ 
    if ($(e.target).data("source") === "myButton") this.doSomething() 
} 

Другого варианта заключается в том, что макет будет проходить в заголовке локальных остов.Событие расширенного объекта, поэтому связь между ними будет конфиденциальной.

Я понимаю, вопрос о инкапсуляции, но я думаю, что читаемость будет лучше в глобальном App.Vent, что вы предложили