ember.jsビュー用にフィルタリングされた異なるリストを表示するにはどうすればよいですか？複雑な設定

Question

私は車のビューを持っているアプリを持っています。私は国をチェックすると、その国で利用可能な部品のリストを下に表示する下のビューを表示するチェックボックスの国のリストを持っています。

他の国を調べると、多くの国の部品がページの下に表示されます。

パーツはすべて1か所に格納されていますが、その国のパーツを表示するには、coutryフィールドでフィルタリングする必要があります。

国のリストを作成することができます。チェックすると、下に国リストが表示されますが、その国の国のみを表示するにはどうすればよいですか。私は各国のためのビューを作成する必要があります、そして、各国の部品が表示するためのコントローラ？

確かに良い方法があります。

EDIT：

Coutries : UK <- selected 

      USA 

      China <- selected 


Parts available in UK: 

.... 

Parts available in China 

.... 

だから私は、選択したそれぞれの国OFR表示別々のリストを必要とする：

これは私が表示されるページを必要とする方法です。

パーツリストについて リック

Answer 1

。 my jsFiddle hereが表示されます。

私はそれはひどく複雑なアプローチではないと思いますが、デザインに関するご質問がある場合はお知らせください。

ハンドルバー：

<script type="text/x-handlebars"> 
    {{#each App.countriesController}} 
     {{view Ember.Checkbox titleBinding="name" valueBinding="isChecked"}} 
    {{/each}} 
    <hr /> 
    {{#each App.countriesController}} 
    {{#if isChecked}} 
     {{view App.PartsByCountryView contentBinding="this" partsListBinding="App.partsController"}} <br />  
    {{/if}} 
{{/each}} 
</script> 

<script type="text/x-handlebars" data-template-name="selected-country"> 
    Country: {{content.name}} <br /> 
    Parts: 
    {{#each filteredParts}} 
     {{name}} 
    {{/each}} 
</script> 
​ 

アプリケーションコード：

window.App = App = Ember.Application.create(); 
/************************** 
* Models 
**************************/ 
App.Country = Ember.Object.extend({ 
    id: null, 
    name: "", 
    isChecked: null 
}); 

App.Part = Ember.Object.extend({ 
    id: null, 
    name: "", 
    countryId: null 
}); 

/************************** 
* Views 
**************************/ 
App.PartsByCountryView = Ember.View.extend({ 
    content: null, 
    partsList: null, 
    templateName: 'selected-country', 

    filteredParts: function() { 
     return this.get("partsList").filterProperty('countryId', this.getPath('content.id')) 
    }.property('partsList.@each').cacheable() 
}); 

/************************** 
* Controllers 
**************************/ 
App.set('countriesController', Ember.ArrayController.create({ 
    content: Ember.A() 
})); 

App.set('partsController', Ember.ArrayController.create({ 
    content: Ember.A() 
})); 

/************************** 
* App Logic 
**************************/ 
$(function() { 
    App.get('countriesController').pushObjects([ 
     App.Country.create({id: 1, name: "USA"}), 
     App.Country.create({id: 2, name: "UK"}), 
     App.Country.create({id: 3, name: "FR"}) 
    ]); 

    App.get('partsController').pushObjects([ 
     App.Part.create({id: 1, name: "part1", countryId: 1}), 
     App.Part.create({id: 2, name: "part2", countryId: 1}), 
     App.Part.create({id: 3, name: "part3", countryId: 1}), 
     App.Part.create({id: 4, name: "part4", countryId: 2}), 
     App.Part.create({id: 5, name: "part5", countryId: 2}), 
     App.Part.create({id: 6, name: "part6", countryId: 2}), 
     App.Part.create({id: 7, name: "part7", countryId: 2}), 
     App.Part.create({id: 8, name: "part8", countryId: 3}), 
     App.Part.create({id: 9, name: "part9", countryId: 3}), 
     App.Part.create({id: 10, name: "part10", countryId: 3}), 
     App.Part.create({id: 11, name: "part11", countryId: 3}) 
    ]); 
}); 
​ 

Answer 2

を助けてください、あなたは、コントローラ上のコレクションにバインドされ#eachヘルパーを使用することができます。コントローラは、現在選択されている国にバインドされたコントローラを観察することができる。選択が変更されると、コレクションが更新され、パーツリストが自動的に更新されます。

Answer 3

私はこのようなアプリケーションを構築します：

1. 一部のオブジェクトOだけのリストを持つモデル。各オブジェクトは、その部分のどれだけが各国に存在するかを保持します。
2. 選択した国に応じてそのリストをフィルタリングするコントローラ。
3. どの国が選択されているかをコントローラに設定するビュー。
4. コントローラから選択したパーツを含むリストを表示するビュー。

私はここに行ってきた：

http://jsfiddle.net/NPeeQ/2/

window.App = Ember.Application.create(); 

App.model = Ember.Object.create({ 

    parts: Ember.ArrayProxy.create({ 
     content: [ 
     { 
      name: 'wheel', 
      stock: { 
       uk: 3, 
       fi: 2, 
       se: 0 
      } 
     }, 
     { 
      name: 'windscreen', 
      stock: { 
       uk: 0, 
       fi: 1, 
       se: 3 
      } 
     } 
    ]}), 

    countries: ['uk', 'fi', 'se'] 

}); 

App.partController = Ember.Object.create({ 

    filterBy: {}, 

    setFilterBy: function (country, on) { 

     var filterBy = $.extend({}, this.get('filterBy')); 

     if (on) { 
      filterBy[country] = true; 
     } else { 
      delete filterBy[country]; 
     } 

     this.set('filterBy', filterBy); 

    }, 

    // returns all available parts filtered by filterBy. 
    availableParts: function() { 

     var parts = App.model.parts; 

     var filter = this.filterBy; 

     var arr = []; 

     App.model.countries.forEach(function(c) { 

      if (!filter[c]) return; 

      arr.push({heading:c}); 

      var tmp = App.model.parts.filter(function(p) { 
       return p.stock[c] && p.stock[c] > 0; 
      }); 

      arr = arr.concat(tmp); 

     });    

     return arr; 

    }.property('filterBy', 'App.model.parts').cacheable() 

}); 

App.SelectorView = Ember.View.extend({ 
    templateName: 'selector', 

    click: function(event) { 

     if (event.target.tagName !== 'INPUT') 
      return; 

     var clicked = $(event.target).closest('label'); 
     var index = this.$().find('label').index(clicked); 

     var country = App.model.countries[index]; 
     var on = event.target.checked; 

     App.partController.setFilterBy(country, on); 

    } 
}); 

App.PartsView = Ember.View.extend({ 
    templateName: 'parts' 
}); 


$(function() { 

    App.selectorView = App.SelectorView.create(); 
    App.partsView = App.PartsView.create(); 

    App.selectorView.append(); 
    App.partsView.append(); 

}) 

そしてハンドルバー：これはおそらく最高のネストされたビューを使用して解決されるだろう

<script type="text/x-handlebars" data-template-name="selector"> 
    {{#each App.model.countries}} 
    <label><input type="checkbox"/> {{this}}</label> 
    {{/each}} 
</script> 

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

    {{#each App.partController.availableParts}} 

     {{#if heading}} 
     <h2>{{heading}}</h2> 
     {{else}} 
    {{name}} <br/> 
     {{/if}} 

    {{/each}} 

</script>