Polymer 聚合自定义元素属性访问或发送

我正在寻找一种从DOM访问聚合自定义元素属性的方法 或者将数据从Polymer.register发送到DOM

下面这个非常简单的元素获取两个值并将它们相乘，将结果放入其

result

属性中

如何从外部访问此结果

<element attributes='value times result' name='value-box'>
  <template>
    <p>{{result}}</p>
  </template>

  <script>
    Polymer.register(this, {
      ready: function() {
        if (this.value != null && this.times != null) {
          this.result = this.value * this.times;
        }
      }
    });
  </script>
</element>

{{result}}

聚合物。注册（本{
就绪：函数（）{
if（this.value！=null&&this.times！=null）{
this.result=this.value*this.times；
}
}
});

结果

是元素的属性，就像

时间

和

值

一样。您可以从JS外部访问它，就像访问普通HTML元素上的任何属性一样。例如：

<value-box value="2" times="10"></value-box>
<script>
  document.querySelector('value-box').result;
</script>

演示：

或者，您可以使用

结果的getter

：

  Polymer.register(this, {
    get result() {
      return this.value * this.times;
    }
  });

演示：

注意对于第二种情况，如果浏览器不支持

对象。观察

，Polymer将设置一个计时器以进行脏检

结果

。这就是为什么在第二个示例的控制台中会显示“here”。在Chrome Canary中运行相同的程序，并在

about:flags

中启用“实验性WebKit功能”，您将看不到计时器。还有一个原因让我不能等待

Object.observe

无处不在

---

希望这能有所帮助。

只是想补充一点有用的后续内容（即使问题已经得到了回答）

我的后续行动是回应以下对实际答案的评论：

---

我很好奇为什么jQuery的选择不起作用。它不识别自定义元素吗？–克鲁斯7月8日13时19分57分

jQuery没有看到您的元素最可能的原因是，当时浏览器运行时没有完全形成元素

我在github页面上开发ASP.NET MVC+polymer js示例应用程序时遇到了这个问题，实际上我试图做的是在polymer使所有东西都可用之前调用polymer对象上的方法和访问属性

一旦我将我正在使用的代码移动到一个按钮点击中（这样我可以在视觉上看到我的组件准备好后手动触发它），一切都很好

现在，如果您试图过早地访问任何内容，例如：在jQ doc.ready处理程序中，您很有可能会遇到像这样的各种愚蠢问题

---

如果您可以找到一种延迟操作的方法，或者更好地使用聚合物信号从组件就绪处理程序向外部代理发送信号，这会设置一个标志告诉您组件就绪，那么您可以轻松地对其进行排序。

非常感谢Eric，我的问题是我使用jQuery$（'value-box'）和document.querySelector（“值框”）一切都很顺利。你在google io 2013上的演讲真是太棒了！谢谢大家。我很好奇为什么jQuery的选择不起作用。它不识别自定义元素吗？我也很好奇。我认为它是一个阴影DOM有什么关系吗？我说得有点晚了，但其他人都想知道：$（'value-box'）返回jQuery集合，而不是本机元素对象。要使其与jQuery一起工作，必须使用$（'value-box'）.get（0）.result

  Polymer.register(this, {
    get result() {
      return this.value * this.times;
    }
  });