Как переключить один элемент в списке Ember в Эмбер

Question

У меня есть компонент следующим образом

{{#md-collection content=model as |item|}} 
    <div class='collection-item'> 
    <img src="{{item.url}}" class="asset-thumbnail" /> 
    <div class="asset-url"> 
     {{item.url}} 
    </div> 
    <div class="secondary-content"> 
     {{#copy-button 
     clipboardText=item.url 
     class="btn" 
     success="successfulCopy" 
     }} 
     {{fa-icon "chain" title="Copy to Clipboard"}} {{unless copied "Copy Link" "Copied"}} 
     {{/copy-button}} 
     {{confirmation-link 
     title="Delete" 
     action=(route-action "deleteAsset" item) 
     icon="trash" 
     message="Are you sure you want to delete this asset?" 
     confirmButtonText="Yes, Delete Asset" 
     confirmButtonColor="#FF6666" 
     classNames="btn delete"}} 
    </div> 
    </div> 
{{/md-collection}} 

и имеет контроллер:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    copied:false, 
    actions:{ 
    deleteAsset(asset){ 
     this.attrs.deleteAsset(asset); 
    }, 
    successfulCopy(btn){ 
     console.log(this.$(btn)); 
     this.$(btn).toggleProperty('copied', true); 
     Ember.run.later(()=>{ 
     this.$(btn).toggleProperty('copied', false); 
     },500); 
    } 
    } 
}); 

, когда я нажимаю кнопку с текстом Copy Link , компонент затем переключает скопированное свойство так, как должно, однако оно переключает свойство для всех элементов в списке, изменяя весь их текст. В действии successfulCopy У меня есть ссылка на HTML кнопки, которая была нажата. Как бы я переключил скопированное свойство только для одного компонента, чтобы только переключать текст этой кнопки?

Answer 1

основного компонента,

{{#copy-button 
    clipboardText=item.url 
    class="btn" 
    success="successfulCopy" as |copied| 
    }} 
    {{fa-icon "chain" title="Copy to Clipboard"}} {{unless copied "Copy Link" "Copied"}} 
    {{/copy-button}} 

Тетради button.hbs
copied свойство доступно в copy-button компонента, поэтому для доступа к нему main-component он должен дать его.

{{yield copied}} 

копирования button.js
successfulCopy функция будет переключать свое собственное свойство copied. поэтому вам не нужно передавать аргумент, и вам не нужны вещи jquery, так как вы уже написали логическое свойство copied. просто переезд copied сделает все остальное.

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    init(){ 
    this._super(...arguments); 
    this.set('copied',false); 
    } 
    actions:{ 
    deleteAsset(asset){ 
     this.get('deleteAsset')(asset); 
    }, 
    successfulCopy(){ 
     this.toggleProperty('copied'); 
    } 
    } 
}); 

Answer 2

попробовать это:

successfulCopy(btn){ 
    this.set('item.copied', true) 
} 

{{fa-icon "chain" title="Copy to Clipboard"}} {{unless item.copied "Copy Link" "Copied"}}