Ember mixins - 这是实现“动态”布局的好方法吗答案

【问题标题】：Ember mixins - is this a good way to achieve 'dynamic' layoutEmber mixins - 这是实现“动态”布局的好方法吗
【发布时间】：2014-11-05 14:44:15
【问题描述】：

我想要达到的目标：

该应用有几个“主要部分”，例如顶部面板、侧边栏，当然还有内容。我想有一个每条路线的“配置”，其中显示了（内容始终存在），大多数路线都具有相同的默认布局。

我的解决方案：

应用程序模板将每个部分的可见性绑定到相关的 ApplicationController 属性
我有一个 LayoutMixin，它在进入路由时获取路由的 layoutSettings 属性，并相应地更新 ApplicationController 属性
离开路由时，mixin 恢复到之前的状态

简约示例：http://emberjs.jsbin.com/fidoquhira/2/edit?html,css,js,output

该方法有效，我非常喜欢使用 mixin + 'config data' 让事情“自动”发生的概念（我也在为面包屑做类似的事情），但我有点担心我会降低清晰度正在发生的事情，或者我没有看到以后可能会爆炸的东西。

这是做事的“Ember 方式”吗？

另外：如何为这样的 mixin 编写单元测试？

【问题讨论】：

标签： javascript ember.js architecture mixins

【解决方案1】：

由于您的问题主要涉及在任何给定点显示哪些信息而不是业务逻辑，因此我的解决方案是将顶部面板和侧边栏视图的可见性绑定到应用程序控制器中的属性。如果您要使用 mixin，我会使用一个为应用程序路由中的属性设置别名的 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”，并为您提供了更多的灵活性。状态存储在一个其他所有东西都可以观察到的地方，业务逻辑在控制器中，显示逻辑在视图中。

【讨论】：