accessing dynamic input values in ember #each block in ember

Question

I'm having issues accessing input values within my component. I'm trying to dynamically create value bindings in my templates and accessing in the conponent.js file using this.controller.get("pst"+id) however the result is underfined. Using Ember 2.2

{{#each post in |pst idx|}}
    {{input value=(concat 'pst' idx)}}
{{/each}}

it seems to be an issue with creating the variable that the value is binded to. The concat helper function builds a string, but when I try this.get.controller("..") on dynamically created string it does not return the value of the input box (and returns undefined) — goofiw, Apr 05 '16 at 16:07
I believe what you need is the `get` helper, possibly in conjunction with concat: `(get this (concat "pst" idx))`. — locks, Apr 06 '16 at 09:57
I tried that with no dice. I also tried just this.get('idx'+i); — goofiw, Apr 06 '16 at 16:30

score 0 · Answer 1 · answered Apr 06 '16 at 20:57

Well, it works as expected, but why would you want to do this?

Please explain what you want to archive and then we can help better.

And to be clear, a value generated with the get helper is immutable.

Why not do something like {{input value=pst}}? If this is not an option probably you should build your array in JS and use that then in handlebars!

score 0 · Answer 2 · answered Apr 07 '16 at 06:40

Define a computed property that wraps your 'post' variable in your component.js file. Iterate over that wrapper. I think this is a powerful way of generating dynamic values.

Your template:

{{#each postWrappers as postWrapper}}
    {{input value=postWrapper.value}}
{{/each}}

Your component.js:

postWrappers : Ember.computed('post', function() { 
   //your concat code
});

accessing dynamic input values in ember #each block in ember

2 Answers2