Buttons: Change value by ID in Ember.js - ember.js

Question

I‘m trying to have a set of buttons in an {{#each}}<button>...</button>{{/each}} block, and to get the target values by an ID of the model ...
Let’s say there is a controller with model and action:
export default Ember.Component.extend({
Texts: [
{id: "1", name: "One", sample: "Hello!"},
{id: "2", name: "Two", sample: "Hello! Hello!"},
{id: "3", name: "Three", sample: "Hello! Hello! Hello! "},
],
theText: "Test",
actions: {
setText: function(id) {
var theText= this.get('Texts.sample', id);
this.set('theText');
console.log(theText);
}
});
and this in the template:
{{#each Texts as |Text|}}
<button {{action "setText" Text.id}}>{{Text.name}}</button>
{{/each}}
<span>{{theText}}</span>
... this is my idea, but all I get is an undefined ...

Answer 1

Define array properties in init method.
Use findBy method to get matching id row.
export default Ember.Component.extend({
Texts: undefined,
theText: "Test",
init() {
this._super(...arguments);
this.set('Texts', [
{ id: "1", name: "One", sample: "Hello!" },
{ id: "2", name: "Two", sample: "Hello! Hello!" },
{ id: "3", name: "Three", sample: "Hello! Hello! Hello! " },
]);
},
actions: {
setText: function(id) {
let result = this.get('Texts').findBy('id', id);
this.set('theText', result.sample);
console.log(result);
}
}
});