엠버

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 속성 때문에 그것을 수득한다 main-component 그것을 액세스 할 copy-button 구성 가능하다.

{{yield copied}} 

복사 button.js
successfulCopy 기능은 자신의 재산 copied을 전환됩니다. 그래서 인자를 전달할 필요가 없으며 jquery를 필요로하지 않습니다. 왜냐하면 이미 논리를 기반으로 작성한 문자가 이기 때문입니다. 단지 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"}}