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}}
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.