在Ember中更改组件内的属性值

Question

I'm wondering how I'd go about dynamically editing a component property from within the component. Code might help you get a bit more clarity on what I'm trying to do.

Templates/boards.hbs

<div>
  {{board-component title='Title that wants to be dynamic'}}
</div> 

Components/board-component.hbs

{{#if isEditing}}

  <div>
    <input type="text" value={{title}}>
  </div>

{{else}}

  <div>
    {{title}}
  </div>

{{/if}}

Am I right in saying that standard behaviour would have the value I specify in the input reflect as the title, but due to the fact that I've declared the value in the template it reverts back to this declared value?

How can I get around this?

Answer 1

<input type="text" value={{title}}>

It means, board-component title property will get values from boards.hbs. and initially, this will be displayed in the input. but changing input value will not reflect it in title property of the components.

But if you used input helper like below,

{{input type="text" value=title}} 

It is two way binding between input value and title property. so whenever you change value from input that will reflect in components.

So answer to your question, use input helper.

{{input type="text" value=title}}