5

コード

新しいルーターでバージョン4fcdbf2560を使用しています。

私のアプリケーションでは、ユーザーは認証される場合とされない場合があります。レンダリングされるテンプレートは、認証状態によって異なります。

で関数を再定義することでこれを管理しrenderTemplateました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は、認証状態に応じてユーザーをリダイレクトするためのものです。

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

ワークフロー

  1. ユーザーが移動する/
  2. が入力され、ApplicationRouteユーザーが認証されていないため、unauthenticatedテンプレートがレンダリングされます
  3. IndexRouteユーザーが認証されていないため、リダイレクトが行われます。signIn
  4. テンプレートはそのsignIn親テンプレートにレンダリングされます ->unauthenticatedテンプレート
  5. ユーザーが正常にサインインすると、route.transitionTo('dashboard')呼び出されます
  6. テンプレートはそのdashboard親テンプレートにレンダリングされます ->unauthenticatedテンプレート

質問

  • 私の実装の何が問題になっていますか?
  • テンプレートのレンダリングrenderTemplate時に関数が呼び出されないのはなぜですか?dashboard
  • アプリケーションにそのテンプレートを再レンダリングさせるにはどうすればよいですか?

2013-01-07 を編集

エヴァンの答えに従ってコードを変更しました。

アプリケーション テンプレートは次のようになります。

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

ユーザーがアプリケーション ページに到達すると、認証されていないため、レンダリングされるのは認証されていないブロックです。{{outlet}}タグに何もレンダリングされないことを除いて、すべてがうまく機能しています...

しかし、アプリケーション テンプレートが次のようになっている場合 (= コンディショナル タグなし):

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

...できます ！{{outlet}}ということで、コンディショナルタグの間にタグを挿入できるのかな。

4

2 に答える 2

2

sly7_7 コメントが答えです。ブロック内のアウトレットについては、 github.com/emberjs/ember.js/pull/1671を参照してください。

これはマスターにマージされました: https://github.com/emberjs/ember.js/pull/1671#issuecomment-11982451

于 2013-01-07T23:22:56.537 に答える
2

Router にこのロジックを入れるのは間違いだと思います。代わりに、これは ApplicationController の一部である必要があります。

ember はアプリケーションの状態が変化するとテンプレートを自動的に更新するため、認証状態を追跡する ApplicationController を作成できます。

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) の状態が変化すると、テンプレートは自動的に更新され、アプリケーションの状態が反映されます。

于 2013-01-06T20:48:39.087 に答える