Question

我正在寻找一种从DOM访问Polymer自定义元素的属性的方法或者将数据从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>

Answer 1

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

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

您的元素内部，您想要的是保持result计算属性最新为times / value更改。有几种方法可以做到这一点。一种是使用<property>Changed观察者[1]：

<element name="value-box" attributes="value times result">
  <template>
    <p>result: {{result}}</p>
  </template>
  <script>
  Polymer.register(this, {
    valueChanged: function() {
      this.result = this.value * this.times;
    },
    timesChanged: function() {
      this.result = this.value * this.times;
    }
  });
  </script>
</element>

演示：http://jsbin.com/idecun/2/edit

或者，您可以使用result的吸气剂：

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

演示：http://jsbin.com/oquvap/2/edit

注意对于第二种情况，如果浏览器不支持Object.observe，则Polymer会将计时器设置为脏检查result。这就是为什么你看到第二个例子在控制台中打印“here”的原因。在Chrome Canary中运行相同的内容，about:flags中启用了“实验性WebKit功能”，您将看不到计时器。我不能等待Object.observe无处不在的另一个原因！：）

希望这有帮助。

Answer 2

只是想添加一个有用的后续内容（即使问题已得到解答）。

我的跟进是对实际答案的以下评论的回应：

我很好奇为什么用jQuery选择不起作用。它不识别自定义元素吗？ - CletusW 2013年7月8日19:57

jQuery没有看到你的元素的最可能原因是因为浏览器在那时没有完全形成运行时间。

我在github页面上开发我的ASP.NET MVC +聚合物js示例应用程序时遇到了这个问题，基本上我试图做的是在聚合物使一切可用之前调用聚合物对象上的方法和访问属性。

一旦我将我使用的代码移动到按钮单击（因此我可以在视觉上看到我的组件准备就绪后手动触发它）一切正常。

现在，如果你试图过早访问任何东西，那么EG：在你的jQ doc.ready处理程序中，你很可能遇到各种各样的愚蠢问题。

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

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

2 个答案: