BackboneJS - 佈局問題

當我需要3種不同的佈局時，它如何與Backbone協同工作？ Forexample當第1頁就會有這樣的佈局：BackboneJS - 佈局問題

<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>

和我的第三頁會looke這樣的：

<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和文本插件...

來源

2013-12-10 SHT

我假設你的使用Backbone和Marionette.js？如果沒有，你一定要看看它，尤其是對你的使用情況木偶有一個名爲Marionette.Layout想你想的是做完全特殊的觀點，相當直接：

您Marionette.Application定義區域#container對象：

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()); 
    } 
});

也看到木偶的github repository，其中包含優秀的文檔。

來源

2013-12-10 16:37:28

這並不直接回答這個問題。 – coderek

@coderek：增加了更詳細的說明。 –

請問選民請建設性，並說明需要什麼來改善這個答案？ –

您應該使用佈局容器來分隔容器內的不同佈局。

<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;

來源

2013-12-11 03:11:48 coderek

BackboneJS - 佈局問題

回答

相關問題