如何在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"}}