3

私はPostsのリストを表示しているjsfiddleでこの作業例を持っています。投稿が選択されると、投稿テンプレートのアウトレットに詳細が表示されます。今のところ問題ありません。

すべての投稿 には多くの コメントがあり、多くの トラックバックがあるため、投稿/表示テンプレートに 2 つのタブを表示して、詳細の下にコメントまたはトラックバックを表示できるようにしたいと考えています。

この場合、投稿/表示テンプレートは次のようになります。

<script type="text/x-handlebars" data-template-name="post/show">
    <h3>{{controllers.post.title}}</h3>
    <p>{{controllers.post.description}}</p>
    <hr/>
    <ul>
        {{#linkTo comments tagName="li"}}<a {{bindAttr href="view.href"}}>Comments</a>{{/linkTo}}
        {{#linkTo trackbacks tagName="li"}}<a {{bindAttr href="view.href"}}>Trackbacks</a>{{/linkTo}}
    </ul>
    {{outlet}}
</script>

コメントとトラックバックのルートは基本的に同じです:

App.CommentsRoute = Em.Route.extend({
    setupController: function (controller, model) {
        comments = this.controllerFor('post').get('comments');
        controller.set('content', comments);
    },
    renderTemplate: function () {
        this.render({
            into: 'post/show'
        });
    }
});

私の質問はrenderTemplateに関するものです:コメントテンプレートをポスト/ショーテンプレートのアウトレットにレンダリングしたいのですが、これは機能していません。値を別の既存のテンプレート (例: application、posts、post )に置き換えると、コメントが表示されます。

私が間違っていることは何ですか？

4

3 に答える 3

3

ルーターの問題のデバッグに役立つ優れた方法の 1 つは、ルーターのログを有効にすることです。

window.App = Em.Application.create({
    LOG_TRANSITIONS: true
});

これにより、どのルートに移行しているかを確認できます。あなたの場合、コメントセクションに移動すると、次のように表示されます。

Transitioned into 'posts.index'
Transitioned into 'posts.post.show'
Transitioned into 'posts.post.comments'

これは、ルートpost.showに遷移するときにルートがアクティブでないことを意味します。commentsそのため、ルートにレンダリングできません{{outlet}}。

post実際のコンテンツにテンプレートを使用していないため、post/showテンプレートの名前を変更postしてshowルートを削除できます。commentこれにより、またはテンプレートを挿入するときに、テンプレートが存在することが保証されますtrackback。

App.Router.map(function () {
    this.resource('posts', function () {
        this.resource('post', {
            'path': '/:post_id'
        }, function () {
            this.resource('comments');
            this.resource('trackbacks');
        });
    });
});

テンプレートを からpost/showに変更したためpost、postControllerから渡された投稿が含まれるpostsため、 を削除してcontrollers.post、投稿のプロパティに直接アクセスできます。

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

あとは、レンダリング先のターゲット ルートを更新するだけpostです。

renderTemplate: function () {
    this.render({
        into: 'post'
    });
}

ワーキング JSFiddle

アップデート

showルートをルートにレンダリングして、テンプレートをテンプレートpostsに置き換えることができます。postpost/edit

更新された JSFiddle

App.Router.map(function () {
    this.resource('posts', function () {
        this.resource('post', {
            'path': '/:post_id'
        }, function () {
            this.route('edit');
            this.resource('comments');
            this.resource('trackbacks');
        });
    });
});

App.PostEditRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render({into: 'posts'});   
    }
});
于 2013-03-01T01:37:09.967 に答える
1

少し変ですが、post/show再度レンダリングするルートを指定する必要があります。

ここにjsfiddleがあります。

renderTemplate: function () {
    this.render('post/show');
    this.render({
        into: 'post/show'
    });
}

更新：リンクを修正

于 2013-03-01T01:38:09.300 に答える