Question

当我需要3种不同的布局时，它如何与Backbone一起使用？例如，当page1具有此布局时：

<div id="container">
    <div id="leftBlock">
      ...load view here...
    </div>
    <div id="centerBlock">
     ...load other views here...
    </div>
    <div id="rightBlock">
    ...load additional views here...
    </div>
</div>

我的第二页的布局如下：

<div id="container">
   <div id="centerBlock">
     ...load other views here...
    </div>
</div>

我的第三页会像这样说：

<div id="container">
    <div id="topBlock">
    ...load additional views here...
    </div>
    <div id="leftBlock">
      ...load view here...
    </div>
    <div id="centerBlock">
     ...load other views here...
    </div>
    <div id="rightBlock">
    ...load additional views here...
    </div>
    <div id="bottomBlock">
    ...load additional views here...
    </div>
</div>

我正在使用require / handlebars和文本插件......

Answer 1

我假设您使用Backbone以及Marionette.js？如果没有，你肯定想看看它，特别是对于你的用例，Marionette有一个名为Marionette.Layout的特殊视图，它们完全是你想要的，非常简单：

在#container对象上定义区域Marionette.Application：
```
MyApp.addRegions({
  container: "#container"
});
```

对于每个布局，请定义Marionette.Layout，其中包含相应视图的区域。

Layout1 = Backbone.Marionette.Layout.extend({
  regions: {
    leftBlock: "#leftBlock",
    centerBlock: "#centerBlock",
    rightBlock: "#rightBlock"
  }
});

Layout2 = Backbone.Marionette.Layout.extend({
  regions: {
    centerBlock: "#centerBlock"
  }
});

Layout3 = Backbone.Marionette.Layout.extend({
  regions: {
    topBlock: "#topBlock",
    leftBlock: "#leftBlock",
    centerBlock: "#centerBlock",
    rightBlock: "#rightBlock",
    bottomBlock: "#bottomBlock"
  }
});

在每个布局的onRender回调中，在其区域内创建每个视图并show，例如：

// within Layout2
onRender: function() {
  leftBlock.show(new LeftBlockView());
  centerBlock.show(new CenterBlockView());
  rightBlock.show(new RightBlockView());
}

根据您的路线，在#container区域显示正确的布局。

Router = Backbone.Router.extend({
  routes: {
    'page1': 'page1',
    'page2': 'page2',
    'page3': 'page3',
  }

  page1: function() {
    MyApp.container.show(new Layout1());
  }
  page2: function() { 
    MyApp.container.show(new Layout2());
  }
  page3: function() {
    MyApp.container.show(new Layout3());
  }
});

另请参阅Marionette的github repository，其中包含优秀的文档。

Answer 2

您应该使用布局容器来分隔容器内的不同布局。

<div id="container">
  <div id="layout1">...</div>
  <div id="layout2">...</div>
</div>

然后你可以像这样创建一个主视图和2个布局视图

SubView1 = Backbone.View.extend({
  el: "#layout1",
  show: function () { this.$el.show();}),
  hide: function () { this.$el.hide();})
});
SubView2 = Backbone.View.extend({
  el: "#layout2",
  show: function () { this.$el.show();}),
  hide: function () { this.$el.hide();})
});

MasterView = Backbone.View.extend({
  el: "#container",
  initialize: function () {
    this.layout1 = new SubView1;
    this.layout2 = new SubView2;
  },
  showLayout1: function () {
    this.layout1.show();
    this.layout2.hide();
  },
  showLayout2: function () {
    this.layout1.hide();
    this.layout2.show();
  }
});
masterView = new MasterView;

BackboneJS - 布局问题

2 个答案: