Question

我试图在我的复合视图下向孩子们添加一个简单的事件，但它根本没有触发......坦率地说，我不知道为什么，看起来很简单，我可以用正常的脊椎做到这一点。。

在下面的示例中，根本不会触发警报，但是当我故意将事件绑定的函数名称更改为其他不存在的函数时，它会抱怨该函数不存在，所以我认为这是其他的...帮助？

    App.View.ContentContainer = Backbone.Marionette.CollectionView.extend({

        className:'content_container',
        itemView:App.View.ContentBrowseItem,
        events:{
            'click .browse_item':'focus_content'
        },
        initialize:function () {
            //this.views = {} //indexed by id
            //this.create_modal_container()
            var coll = this.collection
            coll.calculate_size()
            coll.sort_by('title', -1)
        },
        focus_content:function (e) {
            alert('here???')
            var $modal_container = this.$modal_container
            var content_id = $(e.currentTarget).data('content-id')
            var $selected_view = this.views[content_id]
            var $focused_content = new App.View.FocusedItem({model:$selected_view.model})
            $modal_container.empty().show().append($focused_content.el).reveal().bind('reveal:close', function () {
                $focused_content.close()
            })
            return false
        },
        onShow:function(){
            this.$el.addClass('content_container').isotope({
                selector:'.content_item',
                resizable:true,
                layoutMode:'masonry',

                masonry:{ columnWidth:64 }
            })

        }

编辑：这是生成的HTML：http://pastebin.com/uW2X8iPp div.content_container是App.View.ContentContainer的结果

Answer 1

.browse_item是App.View.ContentBrowseItem itemView元素的选择器吗？在这种情况下，您需要在ItemView定义中绑定事件，而不是CollectionView定义中的事件。原因是在呈现视图时绑定事件。 CollectionView本身在其任何子itemView之前呈现。

此外，如果您要在此点击事件中打开另一个模态视图，我会让应用处理该事件，而不是您的CollectionView

尝试这样的事情：

App.View.ContentBrowseItem = Backbone.Marionette.ItemView.extend({
  ...
  initialize: function() {
    // Maintain context on event handlers
    _.bindAll(this, "selectItem")
  },
  events: {
    "click" : "selectItem"
  }
  selectItem: function() {
    App.vent.trigger("item:select", this.model);
  } 
  ...
});

并实际显示模态详细信息视图：

App.vent.on("item:select", function(itemModel) {
  var detailView = new App.View.FocusedItem({ model: itemModel });

  // You may also want to create a region for your modal container.
  // It might simplify some of your `$modal_container.empty().show().append(..).etc().etc()
  App.modalRegion.show(detailView);
});

允许每个视图处理自己的事件是Backbone和Marionette如此美丽的部分原因。你只是想避免一个视图在另一个视图的业务中全部运行（例如，一个CollectionView试图处理它的ItemView事件，一个ItemView创建事件绑定来显示和关闭一个单独的模态视图等）。

希望这有帮助！

木偶简单事件代表团

1 个答案: