0

完全に機能するレイアウトビューがあります。4 つの子ビューの 1 つに、「イベント」を作成するためのボタンがあります。クリックすると、子ビューを別の追加イベント ビューに置き換えたいと思います。

追加イベント ビューがメイン レイアウト ロジックで起動されるのか、子ビュー内で起動されるのかわかりません。

index.js (レイアウトの親ビュー)

define([
  "marionette",
  'app/views/images/collection',
  'app/views/topPosts/collection',
  'app/views/clients/collection',
  'app/views/events/collection',
  "tpl!app/templates/index.html"
],
  function(Marionette, ImagesView, TopPostsView, ClientsView, EventsView, template) {
    "use strict";
    var AppLayout, layout;
    AppLayout = Backbone.Marionette.Layout.extend({
      template: template(),
      regions: {
        collection1: '#images',
        collection2: '#topPosts',
        collection3: '#clients',
        collection4: '#events'
      },
      onRender: function() {
        this.collection1.show(new ImagesView())
        this.collection2.show(new TopPostsView())
        this.collection3.show(new ClientsView())
        this.collection4.show(new EventsView())
      }
    })
    return new AppLayout()
  })

event/collection.js (これにより、置換ビュー自体が起動されると思われます)

define(["marionette", "text!app/templates/events/collection.html", "app/collections/events", "app/views/events/item", 'app/views/events/create'], function (Marionette, Template, Collection, Row, CreateEventView) {
  "use strict"
  return Backbone.Marionette.CompositeView.extend({
    template: Template,
    itemView: Row,
    itemViewContainer: "ul",
    events: {
      'click #createEvent': 'onClickCreateEvent'
    },
    onClickCreateEvent: function () {
      //render create form over the events collection
    },
    initialize: function () {
      this.collection = new Collection()
      return this.collection.fetch()
    }
  })
})

event/item.js (上記のコレクションのモデル ビュー)

define(["marionette", "text!app/templates/events/item.html"], function(Marionette, Template) {
  "use strict";
  return Backbone.Marionette.ItemView.extend({
    template: Template,
    tagName: "li"
  })
})

これをevent/collection.jsの中に入れてみましたが、アイテムビューが一掃されました

onClickCreateEvent: function () {
      this.$el = new CreateEventView().$el
      this.$el.render(); return this;
    },
4

1 に答える 1

2

イベントは、クリックされた要素を含むビューで発生します。ただし、イベントを呼び出さない限り、イベントは親ビューまで伝播しますstopPropagation()。ただし、CompositeView はそれ自体を置き換える必要はありません。その責任は親ビューに与えられるべきです（AppLayout私は信じています）。ビューの交換を処理する 1 つの方法は次のとおりです。

// index.js
AppLayout = Backbone.Marionette.Layout.extend({
  ...
  events: {
    'click #createEvent': 'onClickCreateEvent'
  },
  ...
  onClickCreateEvent: function(e) {
    this.collection4.show(new CreateEventsView());
  },
  ...

このアプローチの欠点の 1 つは、イベントをバインドする DOM 要素がそのレイアウトのテンプレートに直接関連していないことです。

于 2013-09-16T20:39:34.760 に答える