javascript - 获取在Emberjs中点击的元素的值

Question

我有一系列标签，当用户点击它们时，我想从中检索文本。我认为 jquery 在 Emberjs 中可能是可行的:

$(this).attr('text');

然而，这不适用于 Ember。我的组件 View 是这样的:

<ul class="list-inline">
  {{#each model as |model|}}
    <li {{action "sendToInput"}} class="label label-default">{{model.name}}</li>
  {{/each}}
</ul>

我想通过“sendToInput”操作检索那个 model.name 值。

在我试过的组件js文件中:

actions: {
  sendToInput() {
    $(this.target).attr('text');
  }
}

我也试过:

this.innerHTML;
$(this).text();
this.get('text');
$(this).val();

我也打开了控制台并仔细研究了这个，但似乎无法找到他们存储点击元素的位置。

文档没有提到这一点，我在 Github 上也找不到关于 ember-cli 的问题。

谢谢。

Answer 1

常见的方法是像这样将模型名称作为操作参数传递:

<ul class="list-inline">
  {{#each model as |model|}}
    <li {{action "sendToInput" model.name}} class="label label-default">{{model.name}}</li>
  {{/each}}
</ul>

然后在action中处理:

actions: {
  sendToInput(name) {
    // do something with name
  }
}

但如果您仍然需要访问确切元素的 html，还有另一种解决方法:

export default Ember.Component.extend({

    didInsertElement () {
        this.$().on('click', '.label', function (event) {
            $(this).text();
        })
    }

});