CODEWITHSUNDEEP
ember.jstextfield
Boaz
Boaz

Reputation: 5084

have Ember.TextField observe a change in a property inside an array

I have an array of Objects in the view that supposed to represent a dynamic number of fields in the .hbs So the array is:

export default Ember.View.extend({
  metadata_queries: [{name: '', type: 'Exists',
                     disableValue: true, queryValue:''}
                     /*, {...}, {...} */],
});

The rest of the array elements will be added dynamically

I have a Ember.TextField in the .hbs that needs to be disabled (or hidden - whichever is easier) according to disableValue (that changes by observing the type that is bound to an Ember.Select.

The code:

   {{#each view.metadata_queries}}
        <div class="form-group">
            <div class="col-xs-2 col-xl-2">
                {{view Ember.Select content=view.metaTypes selection=type}}
            </div>
            <div class="col-xs-2 col-xl-2">
              {{view Ember.TextField classBinding=":tests-query" value=queryValue disabled=disableValue}}
            </div>
        </div>
   {{/each}}

The thing is that disableValue is not a property - so the view doesn't get updated (I checked - the boolean itself does change)

How can I do that?

Made a JSFiddle to examplify: http://jsfiddle.net/6Evrq/400/

Upvotes: 2

Views: 128

Answers (2)

Boaz
Boaz

Reputation: 5084

Well... aparrently I didn't update disableValue properly:

The proper way to do it is:

this.get('metadata_queries').forEach(function(item, index, metaQueries) {
      Ember.set(item, "disableValue", item.type === "Exists");
    });

Upvotes: 2

duizendnegen
duizendnegen

Reputation: 73

to make disableValue a property, it has to be wrapped in an Ember Object, like so

metadata_queries: [Ember.Object.create({name: '', type: 'Exists',
                    disableValue: true, queryValue:''})
                    /*, {...}, {...} */],

Upvotes: 1

Related Questions