5

ネストされたルートの使用方法を理解しようとしています。

私のコード:

App.Router.map(function() {
  this.route("site", { path: "/" });
  this.route("about", { path: "/about" });
  this.resource("team", {path:'/team'}, function(){
    this.resource('bob',{path:'/bob'});
  });
});

そして、私はボブのページにアクセスしようとしています:

{{#linkTo 'bob'}}bob{{/linkTo}}

私は何が欠けていますか?

jsbin

ありがとう。

4

2 に答える 2

11

代わりに試す

{{#linkTo 'team.bob'}}bob{{/linkTo}}

その間、この方法でルーターマップを簡素化できます-ルート名と異なる場合にのみパスを指定する必要があります.

App.Router.map(function() {
  this.route("site", { path: "/" });
  this.route("about");
  this.resource("team", function(){
    this.route('bob');
  });
});

アップデート

ここで実際の例を参照してください

要約すると、テンプレートをレンダリングする場所を明示的に指定する TeamBobRoute の renderTemplate 関数の実装を提供する必要がありますbob。render オプションintoを使用すると、デフォルトの動作をオーバーライドして、親アウトレットにレンダリングし、レンダリング先の親テンプレートを選択できます

App.TeamBobRoute = Ember.Route.extend({
  renderTemplate:function(){
    this.render('bob',{
      into:'application',
    });
  }
});

<script type="text/x-handlebars" data-template-name="site-template">
  This is the site template
    {{#linkTo 'about'}}about{{/linkTo}}
     {{#linkTo 'team'}}team{{/linkTo}}
</script>

  <script type="text/x-handlebars" data-template-name="about">
  This is the about page
</script>

    <script type="text/x-handlebars" data-template-name="team">
  This is the team page
    {{#linkTo 'team.bob'}}bob{{/linkTo}}
</script>

  <script type="text/x-handlebars" data-template-name="bob">
  This is the bob page
</script>

<script type="text/x-handlebars">
  This is the application template
  {{outlet}}
</script>

参考までに、render メソッドは次のオプションをサポートしていますinto, outlet and controller

PostRouteルータで定義されているの名前は ですpost

デフォルトでは、render は次のことを行います。

  • postテンプレートをレンダリングする
  • イベント処理用のpostビュー ( ) (存在する場合)PostView
  • およびpostコントローラー ( PostController) (存在する場合)
  • テンプレートのmainアウトレットにapplication

この動作をオーバーライドできます。

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('myPost', {   // the template to render
      into: 'index',          // the template to render into
      outlet: 'detail',       // the name of the outlet in that template
      controller: 'blogPost'  // the controller to use for the template
    });
  }
});

アプリケーション テンプレート内に名前付きテンプレートがある場合は、この方法でターゲットに設定します。

App.TeamBobRoute = Ember.Route.extend({
  renderTemplate:function(){
    this.render('bob',{
      into:'application',
      outlet:'team-member',
    });
  }
});

<script type="text/x-handlebars">
  This is the application template
  {{outlet 'team-member'}}
  {{outlet}}
</script>
于 2013-01-25T22:08:47.040 に答える
3

チームページにアウトレットがありません。テンプレートは次のようになります。

<script type="text/x-handlebars" data-template-name="team">
   This is the team page
   {{#linkTo 'bob'}}bob{{/linkTo}}
   {{outlet}}
</script>

各ルートは、その親のテンプレートのアウトレットにレンダリングされます。

したがって、「チーム」に入ると、「チーム」は「アプリケーション」アウトレットにレンダリングされます。

「bob」に移動すると、「bob」テンプレートが「team」アウトレットにレンダリングされます。

これはオーバーライドできますが、デフォルトの動作です。

また、各親リソースは、2つのモデル/コントローラー/ビュー/テンプレートセットを提供します。したがって、次のように定義します。

this.resource('team',{path:'/team'});

「team」テンプレートと「team-index」テンプレートを取得します。

「チーム」テンプレートは、子ルート間で共有されるものが移動する場所であり(これが、アウトレットが必要な理由です)、「チームインデックス」テンプレートは、「チームインデックス」に固有のものが移動する場所です。

于 2013-01-25T22:28:16.840 に答える