Ember.js Select resets when hidden and shown again

Question

I have an integer property which is bound to multiple input fields. The first one is of type range, the second is a number and the third one is an Ember.Select view. The fields are visible based on a conditional {{#if visible}}. When I move the slider and then hide the fields by setting visible = false and then make them visible again by setting visible = true, the bound value property gets reset to null.

Example here: http://emberjs.jsbin.com/zukukiloseqi/4/edit?html,js,output

In the example above, try to move the slider and then click 'Hide' and then 'Show'. Notice the bound property is reset to null. Also notice that if you don't touch the slider and set the bound property using solely the Ember.Select, everything works fine. And finally, when I omit the Ember.Select field completely, it also works fine.

What is going on here and how can I prevent the property from being reset?

Thanks for your help!

score 2 · Accepted Answer · edited May 23 '17 at 12:05

The problem is with conversion between Number and String. HTML <input> elements always store String representations of the value. Please see this answer: Data binding: property of model object changes from integer to string

I changed your controller as follows, and it seems to work every time (http://emberjs.jsbin.com/zukukiloseqi/9/):

App.IndexController = Ember.Controller.extend({
    bindvalue:'10',
    visible: true,
    numbers: function() {
      var arr = [];
      for (var i = 0; i <= 64; ++i) {
        arr.push(''+i);
      }
      return arr;
}.property(),
actions:{
  test:function(){
    alert(this.get("bindvalue"));    
  },

  toggle: function() {
    this.set('visible', !this.get('visible'));
  }
}
});

Ember.js Select resets when hidden and shown again

1 Answers1