Question

我在使用Marionette的CompositeView时遇到了麻烦。我使用模板在CompositeView中渲染我的模型，并希望向其添加一个click事件。不知怎的，我无法使用CompositeView上的events: { "click": "function" }处理程序使事件工作......我做错了什么？

var FactsMenuItem = Backbone.Marionette.ItemView.extend({
    template: tmpl['factsmenuitem'],

    initialize: function() {
        console.log('factsmenuitem');
    },

    onRender: function() {
        console.log('factsmenuitem');
    }

});

var FactsMenuView = Backbone.Marionette.CompositeView.extend({
    template: tmpl['factsmenu'],

    itemView: FactsMenuItem,

    itemViewContainer: ".subs",

    events: {
        'click': 'blaat'
    },

    blaat: function() {
        console.log('this is not working');
    },

    initialize: function() {
        this.model.get('pages').on('sync', function () {
            this.collection = this.model.get('pages');
            this.render();
        }, this);
    },

    onRender: function() {
        console.log('render factsmenu');
    }

});


var FactsLayout = Backbone.Marionette.Layout.extend({

    template: tmpl['facts'],

    regions: {
        pages: ".pages",
        filter: ".filter",
        data: ".data"
    },

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

        this.factsMenu = new FactsMenu();
        this.factsView = new FactsMenuView({model: this.factsMenu});
    },

    onRender: function() {
        this.pages.show(this.factsView);
    }

});

修改我删除了一些使问题不清楚的代码......

问题在于不会触发复合视图的非集合视图（modelView ??）的事件。我认为这与FactsLayoutView实例化复合视图的方式有关...

Answer 1

问题是由区域的渲染方式引起的。在我的FactsLayout中使用此代码：

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

    this.factsMenu = new FactsMenu();
    this.factsView = new FactsMenuView({model: this.factsMenu});
},

onRender: function() {
    this.pages.show(this.factsView);
}

显然你无法在onRender函数上显示视图......我必须改变FactsLayout的初始化方式：

var layout = new FactsLayout({
    slug: slug
});
layout.render();

var factsMenu = new FactsMenu({ slug: slug });
var factsView = new FactsMenuView({model: factsMenu});

layout.pages.show(factsView);

Answer 2

也许我不太了解你的问题，但如果你需要在复合视图中听一个从项目视图中触发的事件，你应该这样做。

在项目视图test方法中。

this.trigger("test");

在复合视图initialize方法中。

this.on("itemview:test", function() { });

请注意，当从CollectionView的项目触发事件时（CompositeView为CollectionView），它会以itemview前缀为前缀。

希望它有所帮助。

编辑：再读一次你的问题，我认为这不是正确的答案，但是，关于你的问题，我想复合视图中的点击是由项目视图捕获的。你能更好地解释你的目标吗？

Marionette的CompositeView事件没有解雇

2 个答案: