首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >聚合物静态变量听筒?

聚合物静态变量听筒?
EN

Stack Overflow用户
提问于 2016-12-08 23:06:50
回答 3查看 328关注 0票数 0

我一直在努力寻找,没有多少运气。假设您有一个组件Racing Car

代码语言:javascript
运行
复制
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辆赛车:

代码语言:javascript
运行
复制
<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属性,但我不知道如何在聚合物中做到这一点。当然,我可以做这样的事

代码语言:javascript
运行
复制
<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>

但这感觉有点傻。

是否可以做这样的事情:

代码语言:javascript
运行
复制
  properties: {
     ready: { // this variable is intended to be static
       type: Boolean,
       value: {{globalVariableReady}},
       observer: 'onCarReady'
     }
  },

不是以这种方式,而是以某种方式在racing-car的所有实例中全局地更改该属性。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-12-09 20:06:05

找到答案了。iron-meta是我要找的。虽然它不使用数据绑定传播,所以我使用了akc-meta,一个类似的版本

票数 0
EN

Stack Overflow用户

发布于 2016-12-09 02:19:24

聚合物不能与“全局变量”结合,如果你使用的是字面上的“全局变量”。

代码语言:javascript
运行
复制
<script>var globalVariableReady = true;</script>

你可能可以用编程的方式做你想做的事。在四个赛车元素加载后运行的脚本中,调用:

代码语言:javascript
运行
复制
document.querySelectorAll('racing-car').forEach(el => el.ready = true);

注意:上面的代码假设ES6兼容可迭代节点列表浏览器。

但是,如果赛车标记位于您定义的更大的自定义元素中,则使用绑定可能是有意义的,在该元素中,您定义了一个名为"globalVariableReady“的属性以使用您的术语。或者在自绑定模板中,在模板元素上设置一次值"globalVariableReady“,然后快速地更新所有四个子元素。

票数 0
EN

Stack Overflow用户

发布于 2016-12-09 04:14:32

你在找这样的东西吗?

代码语言:javascript
运行
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41050401

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档