Polymer 1.x:从一个属性内部访问属性集

时间:2016-01-27 05:34:38

标签: polymer polymer-1.0

里面 发布的属性我想要使用 单一访问Polymer对象的所有已发布属性变量 而不是全部列出。例如,foo, bar, baz, ...

我尝试使用变量this.properties。哪个 之外 properties属性(例如,_show函数),但无效 它(例如,quux)。

Here is the jsBin

我希望看到:

  

qux:lorem ipsum dolor

     

quux:lorem ipsum dolor

但我实际上看到了:

  

qux:lorem ipsum dolor

     

QUUX:

请提供一个有效的jsBin来展示如何实现这一目标。

http://jsbin.com/bihaqilayu/1/edit?html,output
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    :host {
      font-family: roboto, tahoma, arial, sans-serif;
    }
  </style>
  <paper-button on-tap="_show">Show in Console</paper-button>
  <div>qux: [[qux]]</div>
  <div>quux: [[quux]]</div>
</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        qux: {
          // This works. Trying to repeat below using quux,
          // but using a single variable, without listing all the properties
          computed: '_computeQux(foo, bar, baz)'
        },
        quux: {
          // This is the problematic line
          computed: '_computeQuux(this.properties)'
          /** /
          The following also do not work:
          computed: '_computeQuux(this)'
          computed: '_computeQuux(properties)'
          computed: '_computeQuux(element.properties)'
          /**/
        },
        foo: {
          type: String,
          value: 'lorem',
        },
        bar: {
          type: String,
          value: 'ipsum',
        },
        baz: {
          type: String,
          value: 'dolor',
        },
      },
      _computeQux: function(a, b, c){
        return [a, b, c].join(' ');
      },
      _computeQuux: function(ob){
        return [ ob.foo.value ,
                 ob.bar.value ,
                 ob.baz.value ].join(' ');
      },
      _show: function(){
        console.log(this.properties);
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

1 个答案:

答案 0 :(得分:2)

这不是计算的工作方式......它只适用于属性,而不是字符串中指定的任意值...你可能想要使用getter()或只是一个自定义方法来实现这一点,getter方法是这里说明:http://jsbin.com/hakajiwamu/edit?html,console,output

为了它的价值,你列出所有属性名称的原因是因为只有在定义了所有属性时才会触发计算方法。

即:

computed: 'someFunc(a, b, c)'

只会触发一次.a | b | c!= undefined

这是为了避免在设置每个值时进行无关的调用,并在第一个代码示例后清楚地解释here