javascript - itemView 触发到达父级的自定义事件

标签 javascript layout triggers marionette event-bubbling

我有这个代码 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 的布局(稍后我想要一个更复杂的嵌套)并想在 LAYOUT 中捕获 ITEMVIEW 中发生的事件。它似乎没有向上冒泡或者我在这里做错了什么。


更新 1 我已经尝试了事件、触发器(对于 child )和事件(对于 parent ),但我仍然无法在 parent 内部捕获事件。

我可以使用:

_.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 触发器事件来保持封装并将其全部保留在布局中而不污染整个应用程序?


更新 2

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

我已经更新了 jsfiddle 以使用 _.extend(vent, Backbone.Events)。如果有人对此有更好的模式,请告诉我们 :D

最佳答案

我找到了解决方案(隐藏在文档中的某处,在布局、区域和 View 之间建立了一些联系)!

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


在父级(布局)和子级(itemView)之间的通信上下文中:

1) child 触发自定义事件(反对 vent extend Backbone.Events - 它只与有权访问它的人对话 = 封装)

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


2) parent 通过 on('show',....) 收听此事件有权访问 child >

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


(隐藏的) Marionette 的力量。 (我的意思是当我说隐藏时,因为相对较新,文档是准系统并且复杂示例很少)。

只要有一点毅力,任何事情都可以完成。

关于javascript - itemView 触发到达父级的自定义事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18309436/

相关文章:

jquery - 为什么我这里无法触发 "change"事件?

javascript - 检查两个物体是否面对面

html - 如何创建灵活布局的等间距div网格?

java - Android 图标像素化/模糊

sql-server - SQL数据库触发器线程安全吗?

javascript - 如何通过 JSON 传递函数名称并在 javascript/jQuery 中调用它?

javascript - 制作字典,其键等于所有 ASCII 字符

javascript - ie7-js 导致双垂直间距

javascript - 我可以将 HTML 字符串分配给 HTML DOM 节点的innerHTML 属性吗?

javascript - ExtJS 和 Internet Explorer : Layout corruption with scrollbars