Ember.Select doesn't fire observable when value is changed

Question

I have a Ember.Select with valueBinding set to an item property in an array. This property is being "observed" by a function. That function nevers gets fired after a selection change, although the property's value has changed.

HandelBars:

{{#each tmpUploadedDocument in App.uploadedDocuments}}
    {{view Ember.Select
        valueBinding="tmpUploadedDocument.Category"
        selectionBinding="tmpUploadedDocument.selectedItem"
        contentBinding="App.documentCategories"
        optionValuePath="content.value"
        optionLabelPath="content.label"
        prompt="Select Category..."
  }}
{{/each}}

Javascript:

window.App = Ember.Application.create();

App.documentCategories = [];
App.documentCategories.push({label: 'A', value: '1'},{label: 'B', value: '2'});

App.uploadedDocuments = Ember.A();

var tmpDocument = Ember.Object.create({
    Category: 0,
    CategoryDidChange: function() {
            console.log('Category changed to: ' + this.Category);
        }.observes('Category')
});

App.uploadedDocuments.addObject(tmpDocument);

This jsbin shows it a bit clearer: JSBIN

What I want to accomplish in the observes function is to filter a second Ember.Select. Is this the right way? How can I make this jsbin work?

Thanks on any input.

Answer 1

The problem is that you’re trying to define an observer in Ember.Object.create when it’s normally done while defining a class with Ember.Object.extend. Either you should define a class like this:

var TmpDocument = Ember.Object.extend({

and then instantiate your tmpDocument instance from it, or you need to add the observer to the document after it’s created like I did in this working modification of your JS Bin:

tmpDocument.addObserver('Category', function() {
  console.log('Category changed to: ' + this.Category);
});