lundi 13 février 2017

Ember: computed property (object) not updating in view

I'm new to ember and am creating a search filtering app. I have my search filter "buckets" set up as controller properties and they are bound nicely to query parameters.

I'm looking to create a "your selected filters" component that summarizes what filters the user has currently active. I'm thinking maybe a computed property is the way to do this? In my controller I created one called selectedFilters:

export default Ember.Controller.extend(utils, {

    queryParams: ['filter_breadcrumb','filter_price','filter_size_apparel','filter_color'],

    filter_breadcrumb: [],
    filter_price: [],
    filter_size_apparel: [], 
    filter_color: [],

    selectedFilters: Ember.computed('this{filter_breadcrumb,filter_price,filter_size_apparel,filter_color}', function() {
        let filterContainer = {};
        for (let bucket of this.queryParams) {
            let bucketArray = this.get(bucket);
            if (bucketArray.length > 0) { // only add if bucket has values
                filterContainer[bucket] = {
                    'title' : cfg.filterTitles[bucket], // a "pretty name" hash
                    'values' : bucketArray
                };
            }
        }
        return filterContainer;
    })  
});

The contents of selectedFilters would look something like this when a user has chosen filters:

{ 
    filter_breadcrumb: { title: 'Category', values: [ 'Home > Stuff', 'Garage > More Stuff' ] },
    filter_price: { title: 'Price', values: [ '*-20.0' ] },
    filter_color: { title: 'Color', values: [ 'Black', 'Green' ] } 
}

And then the template would be:

<h1>Selected Filters</h1>

    
        <strong></strong>:  <br>
    


This actually works (kind of). The view is not updating when filters are added and removed. When I hard-refresh the page, they do show up. I'm wondering why they aren't updating even though the "input" properties to selectedFilters do?

I'm thinking either I'm doing it wrong or perhaps there's a better way to do this. Any help appreciated!

Aucun commentaire:

Enregistrer un commentaire