Dynamic Binding in <option> inside Ember.Select - ember.js

Question

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

Answer 1

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.