0

テンプレートが 1 つある Web サイトがあります。

<script type="text/x-handlebars">
mainsite 
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="mainpage"> 
    mainpage
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="subpage"> 
    subpage
</script>

{{#linkTo 'mainpage.subpage'}}{{/linkTo}}

だから私が達成したいのは、人がアドレス/メインページを入力すると「メインサイトのメインページ」が表示され、/メインページ/サブページと入力すると「メインサイトのメインページのサブページ」が表示されることです。

したがって、基本的には、サブページをメインページ テンプレートに配置し、これをメイン テンプレート (上記のリストの最初) に結合したいと考えています。

私はもう試した：

this.resource('mainpage', function() {
    this.route('subpage', { path: '/subpage' });
  });

しかし、linkToアドレスによって作成されたリンクをクリックすると、メインページ/サブページに設定されます(これで問題ありません)が、「メインサイトのメインページ」は表示されますが、「メインサイトのメインページのサブページ」は表示されません。

私が間違っているのは何ですか？修正方法は？

4

1 に答える 1

2

この質問に答えるビューのルーティングとレンダリングに関するチュートリアルを書きました: http://matthewlehner.net/ember-js-routing-and-views/

ただし、この質問をより具体的にするために、ここでの問題はroute対を定義することresourceです。問題を迅速に解決するには、次の 2 つのオプションがあります。

ルート タイプを変更する

this.resource('mainpage', function() {
  this.resource('subpage', { path: '/subpage' });
});

テンプレート名を変更する

data-template-name="mainpage/subpage"

これは、リソースに「サブページ」ルートを追加すると、このリソースに別のアクションが追加されるために発生します。元のケースでは、data-template-name="mainpage/subpage".

これら 2 つのルート 'users/new' と 'users/1/comments' の違いを考えてみてください。最初のルートはユーザーに新しいアクションをレンダリングするだけですが、2 番目のルートはネストされたリソースであり、そこからのコメントが表示されると想定されます。特定のユーザー。Ember を使用すると、これら 2 つの異なるルートを次のように作成できます。

this.resource('users', function () {
  this.route('new'); #renders the 'users/new' template
  this.resource('comments'); #renders the 'comments' template
});

追加のボーナスとして、ルート名は機能するはずです。少なくとも 1.0rc6 ではそうです。

于 2013-07-28T01:02:04.597 に答える