1

非常に基本的なログインフォームを実装しようとしています。私はこれを持っています：

<script type="text/x-handlebars" data-template-name="application">
    {{#if userIsLoggedIn}}
        {{outlet}}
    {{else}}
        {{partial "login"}}
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="_login">
    <div>Username: {{input value=username type="text"}}</div>
    <div>Password: {{input value=password type="password"}}</div>
    <button {{action 'logIn'}}>l o g i n</button>
</script>

logIn アクションは userIsLoggedIn を更新します。

これが最初に読み込まれると、期待どおりにログイン フォームが表示されます。

ログインすると、ログイン フォームが消え、予想どおり、通常のものがアウトレットにレンダリングされます。

別の場所に、userIsLoggedIn を false に変更する [ログアウト] ボタンがあります。これを押すと、期待どおり、通常のものが消えて、ログイン フォームが再表示されます。

この時点で、すべてが最初の読み込み時と同じように見えます。しかし、もう一度ログインすると、空白のページが表示されます。なんで？

おそらく、if ブロック内にアウトレットを設けるべきではないと思います。しかし、それを引き出した場合、userIsLoggedIn チェックを別の場所にコピーして、使用されないようにする必要があります。そして、私が望む動作を生成するために、その重複したチェックを配置できる単一の場所を見つけることができません. ApplicationRoute.renderTemplate() は自然な場所のようですが、私は多くのことを試しましたが、たった 1 回のログイン ステータス チェックでアウトレット階層全体 (そのほとんどは上に表示されていません) をオンまたはオフにする方法を思いつきませんでした。

4

2 に答える 2

2

J Quigley、このフィドルを見てください: http://jsfiddle.net/hjdivad/RBLMW/。私はそれがあなたが望むように働いていると信じています。

あなたのフィドルが失敗する理由の説明を書き上げようとしましたが、新しいルーターの内部を十分に理解していないので、私の答えに自信が持てません. tl ;dr は次のようなものだと思います。

{{outlet}}現在のルート内で変化する可能性のある条件を中に入れないでください。

私が提供した jsfiddle は、Daniel が提案したように、条件を別のルートに置き換えます。基本的に重要な点は、認証されているユーザーに依存するルート階層がログインルート階層から分離されていることを確認して、キャッシュされたルートハンドラーを持つことによって誤ってチェックをスキップしないようにすることです。

于 2013-08-26T04:09:45.890 に答える