我一直在努力寻找,没有多少运气。假设您有一个组件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属性,但我不知道如何在聚合物中做到这一点。当然,我可以做这样的事
<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的所有实例中全局地更改该属性。
发布于 2016-12-09 20:06:05
找到答案了。iron-meta是我要找的。虽然它不使用数据绑定传播,所以我使用了akc-meta,一个类似的版本
发布于 2016-12-09 02:19:24
聚合物不能与“全局变量”结合,如果你使用的是字面上的“全局变量”。
<script>var globalVariableReady = true;</script>你可能可以用编程的方式做你想做的事。在四个赛车元素加载后运行的脚本中,调用:
document.querySelectorAll('racing-car').forEach(el => el.ready = true);注意:上面的代码假设ES6兼容可迭代节点列表浏览器。
但是,如果赛车标记位于您定义的更大的自定义元素中,则使用绑定可能是有意义的,在该元素中,您定义了一个名为"globalVariableReady“的属性以使用您的术语。或者在自绑定模板中,在模板元素上设置一次值"globalVariableReady“,然后快速地更新所有四个子元素。
发布于 2016-12-09 04:14:32
你在找这样的东西吗?
<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>
https://stackoverflow.com/questions/41050401
复制相似问题