Polymer中的JS变量绑定-Java 学习之路

我想用Polymer做一些数据绑定 . 我定义了一个自定义元素：

<dom-module id="my-voltage">
  <template is="auto-binding">
    <div class="circle">{{volts}}</div>
  </template>
  <script>
    class MyVoltage extends Polymer.Element {
      static get is() {
        return "my-voltage";
      }
      static get properties() {
  return {
    volts: {
      type: String
    },
  }
}
      constructor() {
        super();
      }
    }
    customElements.define(MyVoltage.is, MyVoltage);
  </script>
</dom-module>

现在，我想动态地将 volts 绑定到JS变量 . 所以JS就像：

volt = JSON.parse(httpGet('some-api-call'));
  voltage = volt.value.toString();

我希望 volts 显示 voltage 的值 . 我正在尝试 document.getElementById("volt").setAttribute("volts", voltage); ，但我一直在属性赋值"Uncaught TypeError: Cannot read property 'setAttribute' of null" . 在聚合物中这样做的正确方法是什么？

我在html中有元素：

<my-voltage id="volt" class="circle" volts="-1"></my-voltage>

2 回答

0
我看到你正在使用Polymer 2.0 . 我只使用以前的版本 .

无论如何，您想要将数据分配给子元素吗？这里的问题是在“ready”方法期间，不能保证子元素已经加载 . 如果您想要执行更高级的操作，例如进行表单验证，则必须创建一个循环，直到子元素实际存在为止 .
```
var voltElement = {};

var intervalId = setInterval((function() {
  voltElement = this.$.volt;

  if (voltElement) {
    //enter code here
    clearInterval(intervalId);
  }
}).bind(this));
```
.bind（this）只在那里你可以在setInterval中的匿名函数中使用正确的作用域 .

但是，问题对你来说并不复杂 . 你可以做的是创建一个属性变量，并在创建时将其分配给my-voltage元素中的电压属性 .
```
<my-voltage id="volt" class="circle" volts="[[voltage]]"></my-voltage>
```
```
volt = JSON.parse(httpGet('some-api-call'));
this.set('voltage', volt.value.toString());
```
如果已经预先设置了变量，则使用this.set（）使Polymer向使用该变量的元素发送一个事件，就像给定一个默认值一样 .
回复于 2024-05-03T17:45:51+08:00
0
在Polymer的组件内部，您应该使用原生聚合物操作员 . 因此，下一个js代码应该通过聚合物的运算符重写 .
```
document.getElementById("volt").setAttribute("volts", voltage);
```
在Polymer 1.9.1中，此行将具有下一个视图：
```
this.$.volt.set("volts", voltage);
```
要么
```
this.$$('#volt').set("volts", voltage);
```
在Polymer 2.0或3.0中，您可以使用下一个语法：
```
this.shadowRoot.querySelector('#volt').set("volts", voltage);
```
有关Polymer 1.9.1节点查找的更多信息，您可以在那里找到：https://polymer-library.polymer-project.org/1.0/docs/devguide/local-dom#node-finding

使用this.shadowRoot.querySelector的更多示例，您可以在那里找到：https://polymer-library.polymer-project.org/3.0/docs/devguide/dom-template
回复于 2024-05-03T17:45:51+08:00

Polymer中的JS变量绑定

2 回答

相关问题