Ember.js, how to display various filtered lists for presentation? comprehensive setup

Question

I have an application in which I have a view of the car, and I have a list of countries that have a checkbox next to each of them, when I check the country, it displays a view below with a list of parts available in that country.

Checking other countries displays details in more countries on the page.

All parts are stored in one place, but they must be filtered using the coutry field to display only parts of this section for this country.

I can create a list of countries, and when this box is checked, it displays the country section below with a list of details in it, but how can I filter only for display for this country. Do I need to create views for each country and a controller to display each country?

Of course, there is a better way.

EDIT:

Here's how I need a page to display:

Coutries : UK <- selected USA China <- selected Parts available in UK: .... Parts available in China .... 

Therefore, I need separate lists displayed by each selected country.

Please help Rick

Answer 1

This is probably best solved using nested views. You can see my jsFiddle here .

I don't think this is a very complicated approach, but if you have any design questions, please let me know.

Steering wheels:

 <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>​ 

Application Code:

 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

I would structure your application as follows:

• A model with just a list of objects. Each facility indicates how much of this part exists in each country.
• A controller that filters this list based on the selected countries.
• A view that defines in the controller which countries are selected.
• A view showing a list from the controller with selected parts.

I did it here:

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(); }) 

And steering wheels:

 <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> 

Answer 3

For a list of parts, you can use the #each helper associated with the collection on the controller. The controller could observe the controller associated with selected countries. When the selection changes, it will update the collection, which will automatically update the list of your parts.