木偶的复合视图事件未触发

Marionette's CompositeView event not firing

本文关键字：事件 视图 复合      更新时间：2023-09-26

我在使用Marionette的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);
    }
});

编辑：我删除了一些使问题不清楚的代码......

问题在于复合视图的非集合视图（模型视图？？）的事件没有被触发。我认为这与 FactsLayoutView 实例化复合视图的方式有关......

该问题是由区域的渲染方式引起的。在我的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);

也许我不太理解你的问题，但如果您需要侦听从复合视图中的项目视图触发的事件，您应该执行以下操作。

在项目视图中test方法。

this.trigger("test");

在复合视图中initialize方法。

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

请注意，当从CollectionView的项（CompositeView是CollectionView）触发事件时，它前面加上itemview前缀。

希望对您有所帮助。

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

相关文章：