聚合物自定义元素属性访问或发送答案

【问题标题】：Polymer custom element attribute access or send聚合物自定义元素属性访问或发送
【发布时间】：2013-07-07 16:43:15
【问题描述】：

我正在寻找一种从 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>

【问题讨论】：

标签： polymer shadow-dom

【解决方案1】：

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

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

在您的元素内部，您希望在 times/value 更改时使 result 计算属性保持最新。有几种方法可以做到这一点。一种是使用<property>Changedwatchers [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 使用getter：

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

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

注意对于第二种情况，如果浏览器不支持Object.observe，Polymer 将设置一个计时器来脏检查result。这就是为什么您在第二个示例的控制台中看到“此处”打印的原因。在about:flags 中启用“Experimental WebKit features”的情况下，在 Chrome Canary 中运行相同的操作，您将看不到计时器。我等不及Object.observe 无处不在的另一个原因！ :)

希望这会有所帮助。

【讨论】：

非常感谢 Eric，我的问题是我使用 jQuery $('value-box') 和 document.querySelector('value-box') 一切正常。你在 google io 2013 上的演讲真的很棒！谢谢大家
我很好奇为什么使用 jQuery 进行选择不起作用。它不识别自定义元素吗？
我也很好奇。是否认为它与作为影子 DOM 有关？
我在这方面有点晚了，但对于其他想知道这一点的人来说：$('value-box') 返回一个 jQuery 集合而不是原生 Element 对象。要使其与 jQuery 一起使用，您必须使用 $('value-box').get(0).result

【解决方案2】：

只是想对此添加有用的跟进（即使问题已得到回答）。

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

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

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

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

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

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

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

【讨论】：