Question

我正在使用Marionettejs创建一个应用程序。它很好。但我对＆＃39;布局＆＃39;混淆了和＆＃39;区域经理＆＃39;。不使用区域管理器我的视图工作正常。但是我如何使用区域管理器？

在我所在的地区，我有2个容器，即＆＃39; navi＆＃39;和＆＃39;内容＆＃39; - 当我渲染导航时，我不需要内容。 - 是时候在这里与区域经理一起玩了吗？

如果可以的话我可以这样做吗？我遇到了医生，但我仍然不清楚这一切。

请问我的任何一个细节？

这是我的工作示例，请更新小提琴以查看结果。

脚本：

var MenuView = Backbone.Marionette.ItemView.extend({
    template:_.template($('#menuTemp').html()),
    render:function(){
        this.$el.html(this.template());
        return this;
    }
});


//how can i use this?

var rm = new Marionette.RegionManager();
rm.addRegion("foo", "#bar");

//

container = new Backbone.Marionette.Region({
  el: "#container"
});

MyLayout = Backbone.Marionette.LayoutView.extend({
  template: "#my-layout",

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

// Show the "layout" in the "container" region
layout = new MyLayout();
container.show(layout);
layout.removeRegion("content");

layout.menu.show(new MenuView().render()); //not working

Answer 1

您的布局将占有区域 - 您不必担心区域经理。所以你可以定义这样的布局：

 class Show.Layout extends App.Views.Layout
  template: "surveys/show/show_layout"

  regions: 
    questionRegion: "#question-region"
    newRegion: "#new-region"
    panelRegion: "#panel-region"
    bannerRegion: "#banner-region"

您可以在控制器中初始化/显示它：

class Show.Controller extends App.Controllers.Application

    initialize: (options) ->
      { survey, id } = options
      survey or= App.request "survey:entity", id

      App.execute "when:fetched", survey, =>
        @layout = @getLayoutView()

        @listenTo @layout, "show", =>
          @panelRegion survey
          @questionRegion survey
          @bannerRegion survey

        @show @layout

    questionRegion: (survey) ->
      App.request "show:survey:questions", survey, @layout.questionRegion

    panelRegion: (survey) ->
      panelView = @getPanelView survey

      @show panelView, region: @layout.panelRegion

    bannerRegion: (survey) ->
      bannerView = @getBannerView survey    

      @show bannerView, region: @layout.bannerRegion

    getLayoutView: ->
      new Show.Layout

    getBannerView: (survey) ->
      new Show.Banner
        model: survey

    getPanelView: (survey) ->
      new Show.Panel
        model: survey

    getQuestionView: (questions, survey) ->
      new Show.Questions
        collection: questions
        model: survey

基本上你会听show节目，当显示布局时，你会显示每个区域。

我会覆盖控制器中的show方法：

  class Controllers.Application extends Marionette.Controller

    constructor: (options = {}) ->
      @region = options.region or App.request "default:region"
      super options
      @_instance_id = _.uniqueId("controller")
      App.execute "register:instance", @, @_instance_id

    close: ->
      App.execute "unregister:instance", @, @_instance_id
      super

    show: (view, options = {}) ->
      _.defaults options,
        loading: false
        region: @region
      view = if view.getMainView then view.getMainView() else view
      throw new Error("getMainView() did not return a view instance or #{view?.constructor?.name} is not a view instance") if not view

      @setMainView view
      @_manageView view, options

    getMainView: ->
      @_mainView

    setMainView: (view) ->
      return if @_mainView
      @_mainView = view
      @listenTo view, "close", @close

    _manageView: (view, options) ->
      if options.loading
        App.execute "show:loading", view, options
      else
        options.region.show view

    mergeDefaultsInto: (obj) ->
      obj = if _.isObject(obj) then obj else {}
      _.defaults obj, @_getDefaults()

    _getDefaults: ->
      _.clone _.result(@, "defaults")

这完全取决于我从backbonerails.com学到的东西。他的解释比我做得好得多：）。

木偶 - 区域经理需要了解

1 个答案: