Polymer 1.0 Local Dom问题。$ selector

Question

我知道我们可以使用this。$ selector从本地dom中选择元素。但是，如果我有一个单击按钮时触发的函数，我将如何在此函数中按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);
  }
});