2

一致のリストがあり、1 つをクリックすると、一致が表示されます。マスター/ディテール スタイルのページを作成できることはわかっています。このページをクリックすると、同じページのどこかにコンセントが表示されますが、それは私が望んでいるものではありません。

リンクをクリックすると、試合のまったく新しいページに移動するようにしたい. どうすればいいのかよくわかりません。

これが私のルートです#/matches（coffeescriptで）

App.MatchesRoute = Ember.Route.extend(
  model: ->
    App.Match.find()
)

これが私のmatches.handlebars

<div id="matches">
  {{#each match in controller}}
    {{#linkTo "match" match class="panel six columns"}}
      Match between {{match.player.name}} and {{match.opponent.name}}
    {{/linkTo}}
    <br />
  {{/each}}
</div>

// I know that if I have this outlet, it will render `match.handlebars`
// right here, but I want it to be it's own page.
// {{outlet}}

私は Ember を使ってまだ数日しか経っていませんが、見つけたすべての例でマスター/ディテール ビューが使用されています。

私のコードから提供できるその他の情報を教えてください。

4

2 に答える 2

2

<編集日="2013 年 3 月 11 日">

このリポジトリを GitHub にプッシュしました。renderTemplateこれは、あなたが説明している方法を多少使用する概念的なアプリです。

</編集>

子ルートでは、renderTemplateフックを使用して、アプリケーションに特定のテンプレートを特定の .xml でレンダリングするように指示します{{outlet}}。例：

ソースフィドル 

App.Router.map(function() {
    this.resource('matches', { path: 'matches' }, function() {
        this.route('match', { path: 'match/:match_id' });
    });
});

App.MatchesRoute = Em.Route.extend({
    model: function() {
        return App.Match.find();
    },
    setupController: function(controller, model) {
        model = App.Match.find();
        controller.set('content', model);
    },
    renderTemplate: function() {
        this.render('matches', {
            into: 'application'
        })
    }
});

App.MatchesMatchRoute = Em.Route.extend({
    model: function(params) {
        return App.Match.find(params.match_id);
    },
    setupController: function(controller, model) {
        controller.set('content', model);
    },
    renderTemplate: function() {
        this.render('match', {
            into: 'application'
        })
    }
});

これは、そのテンプレート ( ) をMatchesMatchRouteテンプレートにレンダリングするように設定されています。このテンプレートは 1 つしかないため(以下のハンドルバーを参照)、何も指定する必要はありません。matches/matchapplication{{outelet}}

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

<script type="text/x-handlebars" data-template-name="matches">
    <h2>Matches</h2>
    <ul>
    {{#each match in controller}}
        <li>
            {{#linkTo matches.match match}}
                {{match.title}}
            {{/linkTo}}
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="match">
    <h3>{{title}}</h3>
    <p>{{description}}</p>
</script>

複数のコンセントを使用するシナリオがある場合は、以下のハンドルバーのように、それらをハメる必要があります。

<script type="text/x-handlebars">
    <h1>App</h1>
    {{outlet main}}<br />
    {{outlet nested}}
</script>

次に、ルートでアウトレットも指定する必要があります。例：

ソースフィドル

[...route code...]
renderTemplate: function() {

    this.render('content', {
        into: 'application',
        outlet: 'main'
    });

    this.render('buttons', {
        into: 'application',
        outlet: 'nested'
    });

}
[...route code...]
于 2013-03-11T03:42:04.453 に答える
1

renderTemplateルートを定義するときにフックを使用して、テンプレートを別のテンプレートのアウトレットにレンダリングすることができます(ガイドを参照してください: http://emberjs.com/guides/routing/rendering-a-template/ )

あなたの例では、次のようになります。

App.MatchRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render({ into: 'matches' });
  }
});
于 2013-03-11T03:06:27.697 に答える