2

Ember に item-list/item-detail パターンを実装したいのですが、選択したアイテムの横に詳細ビューを表示する必要があるというニュアンスがあります。例えば：

<ul>
    <li><div>Post 1<div></li>
    <li><div>Post 2<div></li>
    <li><div>Post 3<div></li>
    <li>
        <div>Post 4<div>
        <div>
            <ul>
                <li>Comment 1</li>
                <li>Comment 2</li>
                <li>Comment 3</li>
            </ul>
        </div>
    </li>
    <li><div>Post 5<div></li>
</ul>

私が試したHandlebarsテンプレートは次のとおりです。

<script type='text/x-handlebars' data-template-name='posts'>
    <ul>
        {{#each model}}
            {{#linkTo 'post' this}}
                <div>{{title}}</div>
            {{/linkTo}}
            {{#if isSelected}} <!-- How to implement isSelected ? -->
                <div>{{!-- render selected post's comments --}}</div>
            {{/if}}
        {{/each}}
    </ul>
</script>

コントローラーでこれを試しました：

App.PostController = Em.ObjectController.extend({
    isSelected: function() {
        return this.get('content.id') === /* what to put here? */;
    }
});

私が立ち往生しているのはisSelected、「Ember」方式で実装する方法ですか? 私は正しい方向に進んでいますか？

4

1 に答える 1

3

あなたは正しい軌道に乗っています。秘訣は、別のコントローラーを使用して、アイテムリストとアイテム詳細で製品をラップすることです。したがって、handlebars{{each}}ヘルパーが各エントリをListedProductController

{{#each model itemController="listedProduct"}}

を define し、書いていListedProductControllerた関数を追加します。これで、ルーターによって設定された製品とリストされた製品を比較して、アレイを介してisSelectedシングルトンを参照できるようになりました。ProductControllerneeds

App.ProductController = Ember.ObjectController.extend({});
App.ListedProductController = Ember.ObjectController.extend({
  needs: ['product'],
  isSelected: function() {
    return this.get('content.id') === this.get('controllers.product.id');
  }.property('content.id', 'controllers.product.id')
});

ここに実際の例を投稿しました: http://jsbin.com/odobat/2/edit

于 2013-07-11T08:00:09.320 に答える