ボタン：Ember.js

Question

私は{{#each}}<button>...</button>{{/each}}ブロック内のボタンのセットを持ってしようとしている、とモデルのIDで目標値を取得するにはIDによって変更値...

さんが言ってみましょうモデルとアクションを持つコントローラです：

テンプレートで

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); 
     } 

}); 

と、この：

{{#each Texts as |Text|}} 
    <button {{action "setText" Text.id}}>{{Text.name}}</button> 
{{/each}} 

<span>{{theText}}</span> 

...これが私の考えですが、私が得るすべては未定義ある ...

Answer 1

1. initメソッドで配列プロパティを定義します。
2. 一致するID行を取得するには、findByメソッドを使用します。

 
    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); 
      } 
     } 
    });