如何使用新路由器重新呈现应用程序模板？ [英] How to re-render application template with new router?

问题描述

我使用的版本是 4fcdbf2560 与新的路由器。

I'm using the version 4fcdbf2560 with the new router.

在我的应用程序中，用户可以通过身份验证。根据身份验证状态，渲染的模板将不一样。

In my application, a user can be authenticated or not. The rendered template will not be the same depending on the authentication state.

我通过重新定义函数 renderTemplate 在 ApplicationRoute 中：

I've manage this by redefining the function renderTemplate in the ApplicationRoute:

App.ApplicationRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render(App.authenticated() ? 'authenticated' : 'unauthenticated');
    }
});

我的路由器很简单：

App.Router.map(function(match) {
    match('/').to('index');

    match('/sign').to('sign', function(match) {
        match('/in').to('signIn');
    });

    match('/dashboard').to('dashboard');
});

IndexRoute 只是在这里重定向用户取决于身份验证状态：

The IndexRoute is just here to redirect the user depending on the authentication state:

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo(App.authenticated() ? 'dashboard' : 'signIn');
    }
});

工作流程

The workflow

1. 用户导航到 /


2. 输入 ApplicationRoute 由于用户未通过身份验证，未经身份验证的模板已呈现


3. IndexRoute 被输入，因为用户未通过身份验证，重定向到 signIn


4. signIn 模板呈现为其父模板 - > 未认证的模板


5. 用户登录成功 route.transitionTo（'dashboard'）被称为


6. dashboard 进入其父模板 - > 未经身份验证的模板

1. A user navigates to /
2. The ApplicationRoute is entered, as the user is not authenticated, the unauthenticated template is rendered
3. The IndexRoute is entered, as the user is not authenticated, a redirection is made to signIn
4. The signIn template is rendered into its parent template -> the unauthenticated template
5. The user sign in successfully, route.transitionTo('dashboard') is called
6. The dashboard template is rendered into its parent template -> the unauthenticated template

问题

• 我的实现有什么问题？


• 为什么 renderTemplate 函数在 dashboard 模板是rend时不被调用ered？


• 如何强制应用程序重新呈现其模板？



The questions

• What's wrong with my implementation ?
• Why does the renderTemplate function is not called when the dashboard template is rendered ?
• How can I force the application to re-render its template ?

我根据Evan的回答修改了我的代码。

I've modified my code according to Evan's answer.

我的应用程序模板现在如下所示：

My application template now looks like this:

{{#if isAuthenticated}}
    <h1>Authenticated</h1>
    {{outlet}}
{{else}}
    <h1>Unauthenticated</h1>
    {{outlet}}
{{/if}}

用户在应用程序页面上登陆，因为他没有通过身份验证，这是被呈现的未经身份验证的块。一切都很好，除了没有任何东西渲染到 {{outlet}} 标签...

When the user lands on the application page, as he's not authenticated, it's the unauthenticated block which is rendered. Everything is working well except that nothing render into the {{outlet}} tag...

但是当我的应用程序模板看起来像这样（=没有条件标签）：

But when my application template looks like this (=without conditional tags):

<h1>Unauthenticated</h1>
{{outlet}}

...它的工作原理！所以我想知道是否可以在条件标签之间插入 {{outlet}} 标签。

...it works ! So I wonder if the {{outlet}} tag can be inserted between conditional tags.

推荐答案

我认为在路由器中有这个逻辑可能是一个错误;相反，这应该是ApplicationController的一部分。

I think it might be a mistake to have this logic in the Router; Instead this should be part of the ApplicationController.

由于ember会根据应用程序状态更改自动更新模板，您可以创建一个跟踪认证状态的ApplicationController



Since ember will automatically update the templates as application state changes you can create an ApplicationController that tracks the authentication state

App.ApplicationController = Ember.Controller.extend({
    isAuthenticated: null
});

并构建您的模板：

<script type="text/x-handlebars" data-template-name="application">
    {{ #if isAuthenticated }}
        You are now logged in
    {{ else }}
        Please Log In
    {{ /if }}
</script>

现在您实际上不必担心手动更新/呈现模板。由于内部（JS）状态更改，您的模板将自动更新以反映应用程序状态。

Now you don't actually have to worry about manually updating / rendering the template. As the internal (JS) state changes your template will automatically update to reflect the application state.

这篇关于如何使用新路由器重新呈现应用程序模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！