Question

我想用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：无法读取属性'setAttribute'的null”。在聚合物中这样做的正确方法是什么？

我在html中有元素：

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

Answer 1

我看到你正在使用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在使用该变量时向该元素发送一个事件，如果该变量已经事先设置过，就像给定一个默认值一样。

Answer 2

在Polymer的组件内部，应使用本机聚合物运算符。因此，下一个js代码应通过Polymer的运算符重写。

document.getElementById("volt").setAttribute("volts", voltage);

在聚合物1.9.1 中，此行将具有下一个视图：

this.$.volt.set("volts", voltage);

或

this.$$('#volt').set("volts", voltage);

在聚合物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

Polymer中的JS变量绑定

2 个答案: