javascript - 特定 ember 组件的设置值

Question

我制作了一个从代码框中复制一些代码的组件。组件 javascript 如下所示:

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'code',
  classNames: ['lm-code-box'],
  dataTarget: null,
  dataTrigger: Ember.computed('dataTarget',
    function() {
      return `.${this.get('dataTarget')}`;
    }
  ),
  copyAction: null,
  icon: 'ion-code',
  copyStatus: null,
  buttonText: 'Copy',
  didInsertElement() {
    this.clipboard = new Clipboard('.lm-button--copy');

    this.clipboard.on('success',(e) => {
      this.set('icon','ion-checkmark');
      this.set('copyStatus','success');
      this.set('buttonText','Copied');
      e.clearSelection();
    });

    this.clipboard.on('error',(e) => {
      this.set('icon','ion-android-warning');
      this.set('copyStatus','error');
      this.set('buttonText','Error');
    });
  },
  willDestroyElement() {
    this.clipboard.destroy();
  }
});

组件代码如下:

<a class="lm-button--copy {{buttonClass}}" data-clipboard-target={{dataTrigger}} data-clipboard-action={{copyAction}}>
  {{buttonText}} 
  <i class="icon {{icon}}"></i>
</a>
<pre class="{{dataTarget}}">
  {{yield}}
</pre>

然后在我的模板中，代码如下所示:

{{#lm-code-copy dataTarget="testOne"
                        copyAction="copy"}}
    test one
{{/lm-code-copy}}
{{#lm-code-copy dataTarget="testTwo"
                        copyAction="copy"}}
    test two
{{/lm-code-copy}}

一切都复制得很好，但在 block 中:

this.set('icon','ion-checkmark');
this.set('copyStatus','success');
this.set('buttonText','Copied');

更改所呈现的两个组件上的这些键值。我如何告诉 ember 只更改当前组件的值？我假设 this 会设置该上下文，但它似乎并没有达到目的。

Answer 1

我会在这里碰碰运气，因为您没有提供组件模板。我认为您的问题可能出在 CSS 选择器上

this.clipboard = new Clipboard('.lm-button--copy');

您始终使用该选择器定位页面中的所有 .lm-button--copy 元素。这意味着每个组件实例将有一个单独的 this.clipboard 引用，但都指向同一个 dom 元素。

此外，您引用的 this 也不是组件:

this.clipboard.on('success',(e) => { <--- This `this` is your component
  this.set('icon','ion-checkmark'); 
  this.set('copyStatus','success'); <---- These `this` are the context of the invoking success handler (you can set a break point here to see its not the ember component)
  this.set('buttonText','Copied');
  e.clearSelection();
});

您可能想要这样的东西(假设这个 Clipboard 东西也可以接收 dom 元素):

this.clipboard = new Clipboard(this.$('.lm-button--copy'));

在 Ember 组件中，this.$ 指的是包装该组件的外部 div。因此，您将仅选择组件内的元素。我认为您可能需要什么。