Backbone: LayoutView 需要监听 CollectionView 中的 ItemView

Question

我正在尝试使用 Backbone 中的 listenTo 方法来监听子视图、集合视图以及集合视图父 LayoutView 中的触发器。

从 google 搜索很多人提到在 backbone 中使用库来嵌套对象，但我正在尝试弄清楚这样做的标准方法是什么。

为了更清楚，我的问题是：如何让我的 childView (ItemDetailsView) 中的触发器冒泡到父 LayoutView (MyItemsList.Layout)

      var ItemDetailsView = Backbone.Marionette.LayoutView.extend({
          template: JST["items/item"],
          tagName: "li",
          className: "item",

          events: {
              "click @ui.btn": "callTrigger"
          },

          callTrigger: function() {
               this.trigger("hello:world");
           }
      )}; 

      var ItemListView = Backbone.Marionette.CollectionView.extend({
           tagName: "ul",
           childView: itemDetailsView
       });

      MyItemsList.Layout = Marionette.LayoutView.extend({
          template: JST["items/current-items"],
          tagName: "section",
          className: "current-items",

          onShow: function() {
               var listCollection = this.model.currentListCollection;
               var listView = new MyListView({
                    collection: listCollection
               });

               this.listenTo(listView.collection, "hello:world", _.bind(function() {
                    console.log("I heard that!")
               }, this));
          }

       });

Answer 1

使用 CollectionView (http://marionettejs.com/docs/v2.3.2/marionette.collectionview.html#collectionviews-childevents) 的 childEvents 属性。

你的代码可以这样写。

  var ItemDetailsView = Backbone.Marionette.LayoutView.extend({
      template: JST["items/item"],
      tagName: "li",
      className: "item",

      events: {
          "click @ui.btn": "callTrigger"
      },

      callTrigger: function() {
           this.trigger("hello:world");
       }
  )}; 

  var ItemListView = Backbone.Marionette.CollectionView.extend({
       tagName: "ul",
       childView: itemDetailsView,
       // This callback will be called whenever a child is rendered or emits a `render` event
       childEvents: {
          "hello:world": function() {
            console.log("a childView said hello world!");
            this.triggerMethod('child:hello:world');
          }
        }
   });

  MyItemsList.Layout = Marionette.LayoutView.extend({
      template: JST["items/current-items"],
      tagName: "section",
      className: "current-items",

      onShow: function() {
           var listCollection = this.model.currentListCollection;
           var listView = new MyListView({
                collection: listCollection
           });

           this.listenTo(listView, "child:hello:world", _.bind(function() {
                console.log("I heard that!")
           }, this));
      }

   });

Backbone: LayoutView 需要监听 CollectionView 中的 ItemView

Backbone: LayoutView needs to listenTo a ItemView inside a CollectionView

javascript

triggers

backbone.js

marionette

Backbone: LayoutView 需要监听 Co​​llectionView 中的 ItemView

Backbone: LayoutView needs to listenTo a ItemView inside a CollectionView

javascript

triggers

backbone.js

marionette

Backbone: LayoutView 需要监听 CollectionView 中的 ItemView