Question

我希望有两种类型的界面。一个是默认应用程序，另一个是登录屏幕等的全屏模式。

玩了一会儿之后，我想我会尝试在应用程序模板中使用两个命名插座：

{{outlet main}}

{{outlet alternative}}

然后我有一个主模板：

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

通过（我使用的是Ember App Kit，将其呈现为{{outlet main}}，因此以下等同于App.ApplicationRoute = Ember.Route.extend（{...）：

export default Ember.Route.extend({

    renderTemplate: function() {
        this._super();
        this.render('master', {
            outlet: 'main',
            into: 'application'
        });
    },

});

现在，问题在于我想要吹掉主模板，并且对页面的外观和感觉完全不同，例如全屏登录页面，没有包装器/侧边栏或页脚。

我以为我可以在LoginRoute中使用disconnectOutlet停用{{outlet main}}，然后将新的登录模板推送到{{outlet alternative}}，如下所示：

export default Ember.Route.extend({

  renderTemplate: function() {
    this.disconnectOutlet({
        outlet: 'main',
        into: 'application'
    });

    this.render('login', {
        outlet: 'alternative',
        into: 'application'
    });
  },

});

这虽然导致{{outlet main}}仍然被渲染（我想是由于ApplicationRoute - LoginRoute的renderTemplate没有覆盖它？），登录模板在它下面呈现（也就是说，在页面下面/下面）折叠）。

有谁知道如何在Ember中完成UI的完整切换？

Answer 1

这绝对是可能的。根据您的使用情况，如果您只想拆除特定路线的某些插座，可以使用disconnectOutlets。但是，如果你想要更低级别并且完全换掉应用程序每个路由使用的主模板，那么它仍然很容易做到。以this jsbin为例。

Answer 2

我想知道为什么我自己没有创建多个应用程序模板的选项，但我认为您可以通过让应用程序模板只呈现一个插座来实现您尝试做的事情：

<强>模板/ application.hbs

{{outlet}}

然后您可以使用嵌套视图和组件来分解您的应用程序：

<强>模板/ main.hbs

{{view 'TopNav'}}
{{view 'Blog'}}
{{view 'Footer'}}

<强>模板/ alternative.hbs

{{view 'Blog'}}

Answer 3

ember-elsewhere非常适合在正常路线层次结构之外发送内容，建议在Ember docs中使用。

创建目标：

@Entity
@Table(name="item_stock")
public class ItemStcok {

    //constructor
    //getter setter
    @Override
    public String toString() {
        return "ItemStcok [itemId=" + itemId + ", itemName=" + itemName + ", category=" + category + ", unit=" + unit+ ", price=" + price + ", totalQty=" + totalQty + ", reorderLevel=" + reorderLevel + "]";
    }   
}

您应用中的其他任何地方，声明应在目标中呈现哪个组件 - 完成绑定的输入和操作：

{{from-elsewhere name="my-right-sidebar"}}

此处有更多示例：https://ef4.github.io/ember-elsewhere/

一个应用程序中的不同UI /模板

3 个答案: