CODEWITHSUNDEEP
javascriptember.js
James Lam
James Lam

Reputation: 1269

Ember 2.1 Input Field Overwriting Computed Property

I have a computed property that listens to a model and looks something like:

groups: function() {
    let g = this.get('model.items.groups').map(function(obj) { return obj.group; });
    return g.join(',');
  }.property('model.items.groups'),

In my template, I have the following input field:

{{input value=groups type="text" class="form-control" placeholder="Testme"}}

I noticed that after providing input through the UI, the value within Ember inspector for groups becomes a string and no longer a computed property. How do I avoid this in Ember 2.1 and have it merely update the computed property?

Upvotes: 0

Views: 70

Answers (1)

Pedro Rio
Pedro Rio

Reputation: 1444

That happens because the {{input}} helper uses two-way binding by default. When you write in the input field it will write to the value property.

I've been using dockyard's one-way-input addon, that provides an input component with one-way binding by default.

{{one-way-input
  value=groups
  update=(action 'updateSomething')
}}

And then in wherever you're using the component:

actions : {
  updateSomething(value) {
    //Do Something with the value and update model.items.groups?
  }
}

This way, the value is always read from the groups computed property and the action updates the source of the value (and not the computed property)

Upvotes: 1

Related Questions