CODEWITHSUNDEEP
javascriptember.js
J. Barca
J. Barca

Reputation: 555

ember.js: extend Ember.TextField and only update value property on enter key

I'm looking to create a text field just like the one using input helper except it behaves slightly different: it will not update the property it is bound to until the enter key is pressed. I extended the component and tried to override functions that might update the property as such:

InputTextSoftComponent = Ember.TextField.extend(
  keyPress:->
    console.log("keypress")
  propertyDidChange:->
    console.log('propChange')
  didInsertElement:->
    console.log('insert')
  modelChangedValue:->
    console.log('changeval')

)

The component works just like a normal text field now, which I was pleasantly surprised with

{{input-text-soft id="height-input" class="position-inputs" type="text" value=controller.activeRegion.width}}

However, I can't stop the changes in the text field from updating the value target. How can I prevent this and achieve a kind of soft binding so that the input only updates the property on enter key ? I'm looking for a solution specific to Ember CLI and the use of components.

Upvotes: 0

Views: 1017

Answers (1)

ahmed.hoban
ahmed.hoban

Reputation: 516

Create a different bound property. An alias for your real property. Bind your textfield to that property. Update the real property from the alias only if enter is pressed. Pseudo:

{{input-text-soft id="height-input" realValueBinding="controller.activeRegion.width" value=newWidth...}}

keyPress() {
  if (keyCode == xx)
     this.set('realValue', this.get('newWidth'))
}

Upvotes: 1

Related Questions