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

Question

来自里面一个发布属性我想访问所有使用 单个变量 发布 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,输出

<!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>

Answer 1

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

不管怎样，你应该列出所有属性名称的原因是计算方法仅在定义所有属性时触发。

即：

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

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

这是为了避免多余的调用，因为每个值都已设置并且在第一个代码示例

之后得到了清楚的解释here

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

Polymer 1.x: Accessing properties set from inside one property

polymer

polymer-1.0

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

Polymer 1.x: Accessing properties set from inside one property

polymer

polymer-1.0

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