Polymer 1.0 Local Dom this.$ 选择器问题

Question

据我所知，我们可以 select 来自本地 dom 的元素与 this.$ select 或。但是，如果我有一个在单击按钮时触发的函数，我将如何通过该函数中的 ID 访问元素？

例如：

HTML:

 <input id = "counter" value = "10">

JavaScript:

var testButton = this.$.testButton;
$(testButton).click(function(){
   var counter = this.$.counter;
   console.log(counter.value);
}

问题是 "this.$.counter" 现在正在引用按钮

Answer 1

问题是，当您使用 Polymer 时，它不会改变事件处理程序和 this 的工作方式。 this 在您的事件处理程序中对应于 testButton，因为它是触发 click 事件的元素，而不是 Polymer 元素。

试试这个：

var testButton = this.$.testButton;
var counter = this.$.counter;
$(testButton).click(function(){
   console.log(counter.value);
}

Answer 2

使用 Polymer 的 onTap 函数代替 onClick 也可以解决这个问题。

Answer 3

如果您将 jQuery 与聚合物一起使用，那么您很可能做错了什么。

<button on-tap='foo'>

...

Polymer({

...

  foo: function(event){
    console.log(this.$.counter);
  }
});

Polymer 1.0 Local Dom issue with this.$ selector