Question

在my-custom-element中，我尝试根据第二个属性（computedProperty）计算属性（selected）。第二个属性绑定到子元素（selected-values）的属性（iron-selector）。由于观察到的属性是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

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

Polymer：观察具有数据绑定

1 个答案: