按鈕：在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. 使用findBy方法來獲得匹配的ID列。

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