0

我有一个完美的布局视图。在四个子视图之一中，有一个用于创建“事件”的按钮。单击时，我希望将子视图替换为单独的添加事件视图。

我不确定添加事件视图是否会在主布局逻辑或子视图中触发。

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我相信）。处理视图交换的一种方法是：

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

这种方法的一个缺点是您将事件绑定到的 DOM 元素与该布局的模板没有直接关系。

于 2013-09-16T20:39:34.760 回答