Question

我有两个主要页面布局：一个是将用于大多数页面的默认布局，另一个是没有页眉/页脚等的裸布局，将用于例如登录页面。未来可能会有更多。

我当前的路由器：

var AppRouter = Backbone.Router.extend({
    routes: {
        'login': 'login',
        'main': 'main'
    },

    login: function(){
        var mainLayoutView = new MainLayoutView({
            'layout': 'bare'
        });
        App.Notes.mainLayoutContainer.show(mainLayoutView);
    },

    main: function(){
        var mainLayoutView = new MainLayoutView({
            'layout': 'default'
        });
        App.Notes.mainLayoutContainer.show(mainLayoutView);
    }
});

如何实现MainLayoutView以便能够呈现选项中指定的布局？或者我应该有两个单独的布局来处理这两个模板？他们显然会分享很多功能，所以我宁愿只有一个。

Answer 1

一种方式可能看起来像......

MainLayoutView = Backbone.Marionette.ItemView.extend({
  initialize: function(options){
    this.layout = options.layout;
  },

  onRender: function() {
    if (this.layout == 'default') { // or "fullView"
      // Render all components
    } else {
      ...
      // Perhaps there's nothing here
    }
    // Render the center partial view
  }
});

另一种方式可以直接在您的视图模板中。 Marionette建议使用模板系统（Handlebars，Jade，......）。

如果您不使用模板系统，首先应考虑使用模板系统。其次，如果你想要总是渲染所有的观点而只是$(element).hide()你不想要的东西：不要。高级用户将能够再次显示元素，并可能滥用您的系统。另外，这是通过电线发送的无用处理和无用数据： - ）

Answer 2

我想我找到了解决这个问题的最佳方法。我决定在“初始化”中动态设置模板：

var MainLayoutView = Backbone.Marionette.LayoutView.extend({
    initialize: function(options){
        if(options.layout==='bare'){
            this.template = '#bare-layout';
        }
        else{
            this.template = '#default-layout';
        }
    }
});

这样我就可以根据需要使用尽可能多的模板模板。虽然我开始认为理想情况下我应该使用LayoutView的单独实例。

Backbone / Marionette - 处理一个区域的多个布局

2 个答案: