「サインイン」と「招待のリクエスト」の2つのリンクを表示するホームページを持つ残り火アプリがあります。
各リンクは、親()ルートの下のネストされたルートに移動し、ルートのにレンダリングindex
されます。それはそのように働いています:{{outlet}}
index
/
index
:アプリケーションアウトレットにレンダリング/sign_in
:インデックスのものをレンダリングindex/sign_in
してから、インデックステンプレートのアウトレットにレンダリングします/request_invite
:インデックスのものをレンダリングindex/request_invite
してから、インデックステンプレートのアウトレットにレンダリングします
これは正常に機能しますが、私がやりたいのは、index
デフォルトで「サインイン」テンプレートをアウトレットにレンダリングすることです。したがって、上記の最初の箇条書きは次のように変更されます。
/
:にレンダリングしindex
、インデックステンプレートのアウトレットにレンダリングします{{outlet}}
index/sign_in
テンプレート
<script type="text/x-handlebars" data-template-name="application">
<h1>application</h1>
{{#linkTo "index"}}index{{/linkTo}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name='index'>
<h2>index</h2>
{{#linkTo "index.sign_in"}}Sign in{{/linkTo}}
|
{{#linkTo "index.request_invite"}}Request Invite{{/linkTo}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name='index/sign_in'>
<h3>index/sign_in</h3>
</script>
<script type="text/x-handlebars" data-template-name='index/request_invite'>
<h3>index/request_invite</h3>
</script>
ルート
App = Ember.Application.create();
App.Router.map(function() {
this.resource("index", function() {
this.route("sign_in");
this.route("request_invite");
});
});
上記のコードを含むjsbinを次に示します。
index/sign_in
最初にロードしたとき、またはindex/request_invite
テンプレートは表示されません。デフォルトでそのindex/sign_in
テンプレートを表示します。