如何在 Ember 中切换 ember 列表中的单个项目答案

【问题标题】：How to toggle a single item in an ember list in Ember如何在 Ember 中切换 ember 列表中的单个项目
【发布时间】：2016-10-13 19:39:42
【问题描述】：

我有一个组件如下

{{#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。我将如何切换仅该一个组件的复制属性以仅切换该按钮的文本？

【问题讨论】：

每个按钮需要有一个属性，称为copied。现在，您在所有按钮之间共享一个属性，然后每当更改该属性时，它都会在所有使用它的元素中产生连锁反应...
您发布了组件代码，是copy-button 组件代码吗？给我们看代码，你从哪里调用successfulCopy函数那个参数是什么它点击了copy-button组件这个上下文。

标签： ember.js ember-cli

【解决方案1】：

试试这个：

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

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

【讨论】：

【解决方案2】：

主组件，

  {{#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}}

copy-button.hbs
copied 属性在copy-button 组件中可用，因此要访问它main-component 它应该产生它。

{{yield copied}}

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

【讨论】：