エンバー

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"}}