Ember Dynamic Input Value from Model - HTMLbars

Question

Assuming the following model:

export default Ember.Route.extend({
  model() {
    return ['car', 'truck', 'boat'];
  }
});

I can loop through the model like so:

{{#each model as |vehicle index|}}
    {{vehicle}} - #{{index}}
{{/each}}

which would result in this:

car - #0
truck - #1
boat - #2

However, what if I wanted dynamic properties in an input (I know the following does not work the way I want):

{{#each model as |vehicle index|}}
    {{input value=vehicle}}
{{/each}}

Which results in all of the input fields loading with the value already defined: car, truck, and boat in the input.

What I want to make happen is this (assuming you looped through the model, it would 'output' this):

{{input value=car}}
{{input value=truck}}
{{input value=boat}}

but it's not outputting that, it outputs this:

{{input value="car"}}
{{input value="truck"}}
{{input value="boat"}}

The values are already defined but I would like to define 'car' in the model (meaning it has no value) I'm only setting up the name of the input and then later, I would be able to access {{car}} so that whatever the user types in the blank input, it outputs to {{car}}

Answer 1

Looking over the Ember docs, they show an example of Binding dynamic attribute to an input helper

To refer back to the above example the final code would be:

{{#each model as |vehicle index|}}
    {{input value=(mut (get this vehicle))}}
{{/each}}

And if you reference {{car}} in your document, as you type in the input... it would display.