2

次のコンセプトを実現したい。見るべきヒントやキーワードを教えてください。

これらは私の要件です：

  • 要素のリストをレンダリングしたい。
  • 各要素にはボタンが含まれている必要があります。ボタンをクリックすると、クリックした要素に関連する追加の詳細が表示されるはずです (このクリックによってバックエンド サーバーへの追加の呼び出しがトリガーされるため、単純な非表示と表示に jquery を使用したくありません)。

私の推測では、次のように機能する可能性があります。

  • 要素のリストを制御する ArrayController を実装します。
  • ArrayController には、要素ごとに 1 つのコントローラーが含まれている必要があります。
  • 要素がクリックされると、追加の詳細のために、要素ビューのアウトレットがコントローラーに接続されている必要があります。

これらは、そのアプローチに関する私の問題です。

  1. これは実行可能なアプローチですか？
  2. 複数のコントローラーをインスタンス化し、テンプレートで要素を渡すにはどうすればよいですか?
  3. 詳細ビューに適切なコントローラーを接続できるように、要素のコントローラーにアクセスするにはどうすればよいですか?

申し訳ありませんが、説明にこれ以上 Ember 用語を含めることができませんでした。最初のチュートリアルを終えたばかりで、正しい方向性を教えてくれる人が必要です。ありがとうございました！:-)

- - -アップデート - - -

私は週末に自分でこの問題に取り組み、次の解決策を思いつきました。 http://jsfiddle.net/mavilein/SNte7/4/

彼が使用したような単純なモデルがあれば、pangratz によって提案されたソリューション (最初の回答) は良いと思います。彼の答えを見たとき、自分の要件を十分に詳しく説明していないことに気付きました。実際、私の要件は次のようになります。

リストの初期状態

  1. 最初の要素
  2. 2 番目の要素
  3. 3 番目の要素

たとえばアイテム 3 をクリックすると、関連するアイテムが表示されます。

  1. 最初の要素
  2. 2 番目の要素
  3. 3 番目の要素
    • 3 番目の要素の関連アイテム 1
    • 3 番目の要素の関連アイテム 2

したがって、リスト内の要素の関連する項目を制御する別のコントローラーが必要でした。アウトレットが正しい方法だと私には思えました。

実際には、必要な動作を実装するために、ember フレームワークにパッチを適用する必要がありました。現在、私はこの機能を「動的アウトレット名」と呼んでいます。現在、HandleBars テンプレートでアウトレット名を指定できますが、オブジェクトのプロパティを使用してそれらの名前を動的に生成することはできません。String パラメーターがオブジェクトのプロパティを表すかどうかを評価するために、アウトレット ヘルパーにパッチを適用しました。

Ember.Handlebars.registerHelper('outlet', function(property, options) {

  if(arguments.length === 3){      
      var optionsTemp = arguments[arguments.length - 1],
      context = arguments[0];
      var temp = Ember.Handlebars.get(this, context, optionsTemp);
      if(temp)
          property = temp;
      options = optionsTemp;
  }else if (property && property.data && property.data.isRenderData) {
     options = property;
     property = 'view';
  } 

  options.hash.currentViewBinding = "controller." + property;

  return Ember.Handlebars.helpers.view.call(this, Ember.ContainerView, options);
});

そうすれば、オブジェクトのプロパティをアウトレット名の値として使用できます。 

<script type="text/x-handlebars" data-template-name="items" >
    {{#each item in controller}}
        {{item.description}}
        <button {{action showAssociatedItems item}}>Show Associated Items</button>
        {{outlet item.id asd}}            
    {{/each}}
</script>

ここで私の完全な実例を参照してください: http://jsfiddle.net/mavilein/SNte7/4/

私の質問: このソリューションについてどう思いますか? フレームワークにパッチを当てずに実装できたでしょうか? 私が言ったように、最初に提案された解決策は単純なモデルに適しています。しかし、関連するアイテムはモデルとして実現する必要があるため、Ember Controller によって制御する必要があると思います。

4

1 に答える 1

1

ArrayController表示されるすべての要素を保持する を使用します。オブジェクトの詳細を表示するかどうかの設定は、私の意見ではビューで処理する必要があるため、各項目のコントローラー インスタンスは作成しません。単一のアイテムを表示するビューは、詳細が表示されているかどうかにかかわらず、ブックマークを保持します。したがって、次の行に沿って何かを行うことができます。http://jsfiddle.net/pangratz666/ASHFa/を参照してください。

ハンドルバー:

<script type="text/x-handlebars" data-template-name="items" >
    {{#each item in controller itemViewClass="App.ItemView"}}
        {{item.description}} <button {{action toggleDetail}}>{{view.toggleDetailText}}</button>
        {{#if view.showDetail}}
            <img {{bindAttr src="item.img"}}>
        {{/if}}        
    {{/each}}
</script>​

JavaScript :

App = Ember.Application.create({});

App.ItemsView = Ember.View.extend({
    templateName: 'items'
});

App.ItemView = Ember.View.extend({
    toggleDetailText: function() {
        return this.get('showDetail') ? 'hide' : 'show';
    }.property('showDetail'),

    toggleDetail: function() {
        this.toggleProperty('showDetail');
    }
});

App.itemsController = Ember.ArrayController.create({
    content: [{
        description: 'first item',
        img: 'http://25.media.tumblr.com/tumblr_ll3y1pZDVJ1qb08qmo1_250.jpg'
    }, {
        description: 'second item',
        img: 'http://24.media.tumblr.com/tumblr_lk7u170Ztt1qb33vho1_250.jpg'
    }, {
        description: 'third item',
        img: 'http://25.media.tumblr.com/tumblr_lj5367UKg11qzgqodo1_250.jpg'
    }]
});

App.ItemsView.create({
    controllerBinding: 'App.itemsController'
}).append();

</p>

于 2012-10-27T12:25:10.390 に答える