CODEWITHSUNDEEP
ember.js
Martin
Martin

Reputation: 2300

Bound component value isn't updating

I have this component:

App.AppTestComponent = Ember.Component.extend({
  tagName: 'input',
  type: 'text',
  value: undefined,
  attributeBindings: ['type', 'value'],
  
  valueObserver: function() {
    console.log('This code is never triggered');
  }.observes('value')
});

I bind the value attribute using the attributeBinding, but when I change the textbox value, the value property isn't updating, and the valueObserver isn't triggered.

How do I bind to the value attribute of a input type="text" ? Do I have to extend from Ember.TextField ?

Here's an example of the problem: http://emberjs.jsbin.com/lodisucasa/1/edit?html,js,output

Upvotes: 1

Views: 227

Answers (1)

Kalman
Kalman

Reputation: 8121

I was digging in the Ember code to see how it works for the Ember.TextField component (see here).

I didn't see anything specific in there, but I noticed the component is using TextSupport mixin (see here).

If you look at TextSupport mixin (here), you will see that it listens for input events and then responds to those events by actively setting the value property inside _elementValueDidChange method:

this.on("input", this, this._elementValueDidChange);

So... if you want your component to have the same functionality, you need to do the following:

App.AppTestComponent = Ember.Component.extend({
  tagName: 'input',
  type: 'text',
  value: "",
  attributeBindings: ['type', 'value'],

  init: function() {
    this._super.apply(this, arguments);
    this.on("input", this, this._elementValueDidChange);
  },

  _elementValueDidChange: function() {
    Ember.set(this, 'value', this.$().val());
  },

  valueObserver: function() {
    console.log('This code is never triggered');
  }.observes('value')
});

Working example here

Upvotes: 1

Related Questions