聚合物静态变量侦听器？

Question

我一直在尝试搜索，但运气不佳。假设您有一个组件 Racing Car:

Polymer({
  is: 'racing-car',
  properties: {
     ready: { // this variable is intended to be static
       type: Boolean,
       value: false,
       observer: 'onCarReady'
     }
  },

  onCarReady: function(newVal, oldVal) {
    console.log('time to run!');
  }
})

在您应用的其他地方，您初始化了 4 辆赛车：

<racing-car id="car1"></racing-car>
<racing-car id="car2"></racing-car>
<racing-car id="car3"></racing-car>
<racing-car id="car4"></racing-car>

这不是静态变量的最佳示例，但希望您能理解。

想象一场比赛，我想一次更改所有赛车实例的 ready 属性，但我不确定如何在 Polymer 中执行此操作。当然我可以做一些像

<racing-car id="car1" ready="{{globalVariableReady}}"></racing-car>
<racing-car id="car2" ready="{{globalVariableReady}}"></racing-car>
<racing-car id="car3" ready="{{globalVariableReady}}"></racing-car>
<racing-car id="car4" ready="{{globalVariableReady}}"></racing-car>

但这感觉有点蠢。

是否可以这样做：

  properties: {
     ready: { // this variable is intended to be static
       type: Boolean,
       value: {{globalVariableReady}},
       observer: 'onCarReady'
     }
  },

不是以那种方式，而是在 racing-car.

的所有实例中以某种方式全局更改此属性

Answer 1

聚合物无法绑定到 "global variable" 如果您按字面意思使用该术语，即

<script>var globalVariableReady = true;</script>

您可能可以通过编程方式做您想做的事。在加载四个赛车元素后运行的一些脚本中，调用：

document.querySelectorAll('racing-car').forEach(el => el.ready = true);

注意：上面的代码假定使用 iterable node lists.

的 ES6 兼容浏览器

使用绑定，但如果赛车标签位于您定义的更大的自定义元素内，您可以在其中定义一个名为 "globalVariableReady" 的属性来使用您的术语。或者在 autobind template 中，您在模板元素上设置值 "globalVariableReady" 一次，然后将快速连续更新所有四个子元素。

Answer 2

您在找这样的东西吗？

<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
  <my-element></my-element>
  <my-element></my-element>
  <my-element></my-element>
  <my-element></my-element>
  <div onclick="changeValue()">click me to change value</div>
  <script>
    function changeValue() {
      glob = "new Value";

    }
  </script>
</body>

</html>




<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    click me to check the value
  </template>
</dom-module>
<script>
  var glob = 'initial Value';
  Polymer({
    is: 'my-element',
    listeners: {
      'tap': '_onTap'
    },
    _onTap: function() {
      alert(glob);
    }
  });
</script>

Answer 3

找到答案。 iron-meta 是我要找的。虽然它不通过数据绑定传播，所以我使用 akc-meta 代替，类似的版本

聚合物静态变量侦听器？

Polymer static variable listener?

polymer

polymer-1.0