javascript - Ember mixins - 这是实现 'dynamic' 布局的好方法吗

Question

我想要实现的目标:

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

我的解决方案:

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

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

这种方法有效，我非常喜欢使用 mixin +“配置数据”来使事情“自动”发生的概念(我也在为面包屑做类似的事情)，但我有点担心我会降低清晰度正在发生的事情，或者我没有看到可能会在以后某个时候爆炸的东西。

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

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

Answer 1

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