CODEWITHSUNDEEP
ember.jsmulti-select
mlienau
mlienau

Reputation: 813

Dynamic Binding in <option> inside Ember.Select

If you look at my brief history of questions, I've seem to have built up a reputation for asking simple questions that I should have figured out the answers to myself, before wasting people's time. With this one though I'm genuinely stumped and I would greatly appreciate some help, so here goes...

  1. I have a multi select list (will eventually use a jquery plugin to make it pretty) that will be populated based on some user criteria (in my example the options are hardcoded, but an example would be a 13 year old shouldn't be able to see rated "Mature" games in my game store).
  2. Based on some search criteria (let's say we are searching by publisher, games available in a specific country, etc..) The counts for each multi-select item, should update as the search criteria changes and the counts change. (In my example I just change a value with a timer)

Here is the fiddle, http://jsfiddle.net/AMPBb/1/

It seems like there are a few ways I could solve this, like a countBinding on my SelectListItem with a displayText computed property, but I can't actually finish a working example. The first option that has the changing count is very hackerish, but demonstrates the functionality that I'm expecting. I haven't come across an example like this before, so I'm very interested in seeing what the best approach to solving this should be.

Thanks in advance for any help.

Upvotes: 0

Views: 855

Answers (1)

pangratz
pangratz

Reputation: 16153

I would create a computed property label on your App.SelectListItem which is defined as follows, see http://jsfiddle.net/pangratz666/Y6467/

label: function() {
    var text = this.get('text');
    var value = this.get('value');
    return '%@ (%@)'.fmt(text, value);
}.property('text', 'value').cacheable()

Also note that you have to create a valueBinding to your 'App.CountModel.*' in your App.SelectListItem.

One more thing about naming convention: concrete instances should be named in lowerCase, so it's App.countModel. See http://www.emberist.com/2012/04/09/naming-conventions.html.

Upvotes: 1

Related Questions