灰燼混入 - 這是一個很好的方式，實現「動態」佈局

我想要實現：灰燼混入 - 這是一個很好的方式，實現「動態」佈局

該應用程序有一些「主要部分」，如頂部面板，側邊欄和課程內容。我希望有一個按路線「配置」顯示哪些內容（內容始終存在），大多數路由具有相同的默認佈局。

我的解決辦法：

應用程序模板結合各部分的可見性相關的ApplicationController財產
我有一個LayoutMixin其中，在進入航線，獲取路線的layoutSettings財產，並相應地更新ApplicationController的性能
當離開路線時，mixin恢復以前的狀態

簡約示例：我很喜歡使用mixin +'config data'來使事情'自動地'發生的概念（我也對面包屑做類似的事情），但我有點擔心我是降低正在發生的事情的清晰度，或者我沒有看到可能在稍後發生的事情。

這是做事的「Ember方式」嗎？

此外：如何編寫這種mixin的單元測試？

來源

2014-11-05 Ivan Šokčević

由於您的問題主要涉及在任何給定點顯示的信息而不是業務邏輯，我的解決方案是將頂部面板和側欄視圖的可見性綁定到應用程序控制器中的屬性。如果你要使用一個mixin，我會使用一個爲應用程序路由中的屬性加上別名，並且可能會給你一些顯示，隱藏或切換狀態的操作。例如：

//application controller 
export default Ember.Controller.extend({ 
    isTopPanelVisible: false, 
    isSideBarVisible: false 
}); 

//panel visibility mixin 
export default Ember.Mixin.create({ 
    needs: ["application"], 
    isTopPanelVisible: Ember.computed.alias("controllers.application.isTopPanelVisible"), 
    isSideBarVisible: Ember.computed.alias("controllers.application.isSideBarVisible"), 
    actions: { 
     showTopPanel: function(){ 
      this.set("isTopPanelVisible", true); 
     }, 
     showSideBar: function(){ 
      this.set("isSideBarVisible", true); 
     } 
    } 
}); 

//controller for some route 
export default Ember.ObjectController.extend(panelVisibility, { 
    initializeRoutesVisibility: function(){ 
     this.set("isTopPanelVisible", true); 
     this.set("isSideBarVisible", false); 
    }.on("init") 
}); 

//sidebar view 
export default Ember.View.extend({ 
    classNameBindings: ["hidden"], 
    hidden: true, 
    setVisibility: function(){ 
     if (this.get("controller.isSideBarVisible"){ 
      this.set("hidden", false); 
     } else { 
      this.set("hidden", true); 
     } 
    }.observes("controller.isSideBarVisible").on("didInsertElement") 
}); 

//top panel view 
export default Ember.View.extend({ 
    classNameBindings: ["hidden"], 
    hidden: true, 
    setVisibility: function(){ 
     if (this.get("controller.isTopPanelVisible"){ 
      this.set("hidden", false); 
     } else { 
      this.set("hidden", true); 
     } 
    }.observes("controller.isTopPanelVisible").on("didInsertElement") 
}); 

//some css file 
.hidden { 
    display: none; 
}

我認爲這個解決方案更「Ember」，給你更多的靈活性。狀態被存儲在一個其他地方所觀察到的地方，業務邏輯進入控制器，顯示邏輯進入視圖。

來源

2014-11-08 05:42:26

灰燼混入 - 這是一個很好的方式，實現「動態」佈局

回答

相關問題