Question

Salutations

I have been trying to find a way to edit an Ember.Select box without actually manually selecting the values but editing them internally. My Ember.Select looks like this:

{{view Ember.Select 
  contentBinding="Et.router.availablePhasesController" 
  optionValuePath="content.id" 
  optionLabelPath="content.label" 
  selectionBinding="a.selectedPhase"
}}

availablePhasesController looks like this:

Et.AvailablePhasesController = Ember.ArrayController.extend({
content: [
  { id: 1, label: "1" },
  { id: 2, label: "2" },
  { id: 3, label: "3" }
 ]
});

This all works fine an dandy when I select these values from the select box, but my question is, can I somehow change the value on the select element created by Ember.Select and it will trigger the binding, meaning my “a.selectedPhase” will also get the value used to change the select element.

I tried using jQuery with .val() and .attr(“value”) but this only affected the UI and did not trigger the binding, meaning the select box had the value but not “a.selectedPhase”

I also tried extending the Ember.Select view and found out that it has a variable “value” which stores the current value and updates according to the binding but I could not find any use for this. I created observers that observed when this value changed but that didn’t help since it only changed when I manually selected a new value.

To summarize, is there a way to trigger the selectionBinding through some means other then directly changing the variables in the bindings or through the UI?

EDIT: I have created a jsfiddle as someone requested in the comments: http://jsfiddle.net/y52Pc/2/

You can see that the binding works fine, if you select a different option with the select box it will update correctly. I also set up two buttons, one uses the Ember.set method, this will work fine as well and will trigger the binding. The other method which uses jQuery.val() will only affect the UI and not trigger the binding.

What I am looking for is some other way of triggering the bindings with something else then .set or manually by selecting the select box.

EDIT 2: I added an updated way of triggering the bindings through jQuery here: http://jsfiddle.net/y52Pc/3/
This seems to solve the problem!

Answer 1

Whenever you change value of select component using $().attr(), it will not trigger the change event (DOM event should fire to ember.js update the bindings). You should manually call like $('selector').attr().trigger('change')