ember.js comment faire pour afficher les différentes listes filtrées pour une vue?complexe d'installation

Question

J'ai une application dans laquelle j'ai une voiture, vue et j'ai une liste de pays avec une case à cocher à l'encontre de chacun que lorsque je vérifie un pays, il affiche une vue ci-dessous une liste des pièces disponibles dans le pays.

La vérification de plus en plus de pays affiche les différentes parties dans plus de pays en bas de la page.

Les pièces sont toutes stockées dans un endroit, mais ont besoin d'être filtrée par coutry champ d'afficher uniquement les parties de cette section pour ce pays.

Je peux créer la liste des pays et lorsque cette case est cochée, il affiche un pays l'article ci-dessous avec la liste des pièces dans, mais comment je filtre pour n'afficher que pour le pays.Ai-je besoin pour créer des vues pour chaque pays et un contrôleur pour chaque pays parties à l'affichage ??

Il y a sûrement une meilleure façon.

EDIT :

C'est de cette façon j'ai besoin de la page à afficher :

Coutries : UK <- selected

           USA

           China <- selected


Parts available in UK:

....

Parts available in China

....

J'ai donc besoin de séparer les listes affichées ofr chaque pays sélectionné.

S'il vous plaît aider Rick

Answer 1

Ce serait probablement la meilleure résolu à l'aide de vues imbriquées.Vous pouvez voir mon jsFiddle ici.

Je ne pense pas que c'est terriblement compliqué, mais si vous avez des questions au sujet de la conception s'il vous plaît laissez-moi savoir.

Guidon:

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

Le Code De L'Application:

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

Je structurerais votre application comme ceci:

1. Un modèle avec juste une liste des objets de pièce. Chaque objet détient combien de cette partie existe dans chaque pays.
2. Un contrôleur qui filtre cette liste en fonction des pays sélectionnés.
3. Une vue qui définit dans le contrôleur quels pays sont sélectionnés.
4. Une vue qui affiche une liste du contrôleur avec les pièces sélectionnées.

J'ai fait ça ici:

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

})

Et le guidon:

<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

Pour la liste des pièces, vous pouvez utiliser un #each aide liée à une collection sur un contrôleur. Le contrôleur pourrait observer un contrôleur lié aux pays actuellement sélectionnés. Lorsque la sélection change, elle mettrait à jour la collection, qui mettrait automatiquement à jour votre liste de pièces.