0

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

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

    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 的结果 el

4

1 回答 1

2

是itemView 元素.browse_item的选择器吗？App.View.ContentBrowseItem在这种情况下，您需要在定义中绑定事件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 创建事件绑定以显示和关闭单独的模态视图等）

希望这可以帮助！

于 2012-10-27T22:53:27.063 回答