聚合物：观察具有数据绑定的数组的属性变化

Question

在my-custom-element 中，我试图根据第二个属性 (selected) 计算一个属性 (computedProperty)。第二个属性绑定到子元素 (iron-selector) 的属性 (selected-values)。由于观察到的属性是 Array 类型，因此我使用 expecting selected.* 语法来工作。它没有。

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-selector/iron-selector.html">

<dom-module id="my-custom-element">

  <style>
    :host ::content .iron-selected {
      background-color: orange;
    }
  </style>
  <template>
    <div>logged:<span id='logged'></span></div>
    <div>computed:<span id='computed'>{{computedProperty}}</span></div>
    <iron-selector multi selected-values="{{selected}}" attr-for-selected="uid">
        <div class="select-option" uid="foo">foo</div>
        <div class="select-option" uid="bar">bar</div>
        <div class="select-option" uid="baz">baz</div>
    </iron-selector>
    <button on-tap="log">Log</button>
  </template>

  <script>
    Polymer({
      is: 'my-custom-element',
      properties: {
        selected: {
          type: Array,
          default: function () { return []; }
        },
        computedProperty: {
          type: String,
          computed: 'compute(selected.*)'
        }
      },
      compute: function(selected) {
        return this.selected.join();
      },
      log: function() {
        return this.$.logged.textContent = this.selected.join();
      }
    });
  </script>
</dom-module>

正如我可以使用日志按钮检查的那样，selected 属性的值已通过绑定正确传播。

我做错了什么？

Answer 1

我创建了一个解决绑定问题的修复程序：

https://github.com/Trakkasure/iron-selector/tree/fix-multiselect

我已提出拉取请求以获取此修复程序。