2

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

2 回答 2

6

result是元素上的一个属性，就像timesand一样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

或者，您可以将 getter 用于result：

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

演示： http: //jsbin.com/oquv​​ap /2/edit

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

希望这可以帮助。

于 2013-07-07T21:20:45.240 回答
0

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

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

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

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

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

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

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

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

于 2014-02-05T21:53:07.287 回答