灰烬混入 - 这是一个很好的方式，实现“动态”布局

我想要实现：灰烬混入 - 这是一个很好的方式，实现“动态”布局

该应用程序有一些“主要部分”，如顶部面板，侧边栏和课程内容。我希望有一个按路线“配置”显示哪些内容（内容始终存在），大多数路由具有相同的默认布局。

我的解决办法：

应用程序模板结合各部分的可见性相关的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

灰烬混入 - 这是一个很好的方式，实现“动态”布局

回答

相关问题