Polymer 中的 JS 变量绑定答案

【问题标题】：JS variable binding in PolymerPolymer 中的 JS 变量绑定
【发布时间】：2017-07-14 15:40:45
【问题描述】：

我想用 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);，但我在属性分配中不断收到“未捕获的类型错误：无法读取 null 的属性 'setAttribute'”。在聚合物中这样做的正确方法是什么？

我确实有 html 中的元素：

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

【问题讨论】：

标签： javascript polymer

【解决方案1】：

我看到您使用的是 Polymer 2.0+。我一直在使用以前的版本。

无论如何，您想将数据分配给子元素吗？这里的问题是，在“就绪”方法期间，不能保证子元素已经加载。如果你想做一些更高级的事情，比如做一个表单验证，你必须创建一个循环，直到子元素实际存在。

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 使用该变量向元素发送事件，前提是该变量已经预先设置，例如被赋予了默认值。

【讨论】：

【解决方案2】：

在 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

【讨论】：