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();
        })
    }

});