Marionette.Layouts可以在子区域之外拥有动态内容吗？

Question

我正在为包含多个嵌套资源的资源开发单页面视图.使用以下模板,我可以获取要呈现的顶级属性或集合,但不能同时获取两者:

h1= @name
ul
  #decisions


class Happenator.Views.ShowHappening extends Backbone.Marionette.Layout
  template: "happenings/show"
  regions:
    decisions: "#decisions"

  initialize: ->
    @decisionsView = new Happenator.Views.Decisions(collection: @model.get("decisions"))
    # Uncomment to render @model.name, but lose the decisions
    # @bindTo(@model, "change", @render)

  onRender: ->
    @decisions.show(@decisionsView)

是否有一种可接受的方法来绑定顶级布局,以便在数据更改/到达时重新呈现,或者是否所有动态内容都支持进入子区域？

Answer 1

布局呈现区域将管理的DOM元素.因此,render再次调用布局将强制重新渲染区域的元素.这些地区会看到这个并再次接收它们,但是这会对您的应用产生其他各种负面影响,如您所述.

处理此问题的简单方法是:

a)具有单独的更改:属性事件处理程序,仅更新已更改的数据

b)使用数据绑定解决方案为您执行此操作,例如https://github.com/theironcook/Backbone.ModelBinder

第三种方法是在布局中创建第二个区域,并使用模型将ItemView填充到该区域.然后,只要模型发生变化,您就可以重新渲染该视图:

h1= @name
ul
  #decisions

class Happenator.Views.HeaderView extends Backbone.Marionette.ItemView
  template: "happenings/model-template"
  initialize: ->
    @bindTo(@model, "change", @render)

class Happenator.Views.ShowHappening extends Backbone.Marionette.Layout
  template: "happenings/show"
  regions:
    header: "#header",
    decisions: "#decisions"

  initialize: ->
    @decisionsView = new Happenator.Views.Decisions(collection: @model.get("decisions"))
    @headerView = new Happenator.Views.HeaderView(model: @model)

  onRender: ->
    @decisions.show(@decisionsView)
    @header.show(@headerView)

如果是我,我会使用选项#3并在布局内嵌入另一个项目视图,用于模型渲染.这将在该视图中为您提供更多的自由度和灵活性,使其与布局分离.