Polymer-Dart Iron-list 未绑定到选定项目答案

【问题标题】：Polymer-Dart iron-list not binding to selected-itemPolymer-Dart Iron-list 未绑定到选定项目
【发布时间】：2017-02-10 22:23:43
【问题描述】：

这是代码的子集，使用 <iron-list> 和：

HTML

<iron-list selected-item="{{selectedItem}}" selection-enabled>
  <template is="dom-repeat" items="{{inputs}}">
    [[item.name]]
  </template>
</iron-list>
{{selectedItem}}

飞镖

class className extends PolymerElement {
  @property var selectedItems;
  @property List inputs = new List.from([{"name": "fred"}]);
}

选择时，selectedItem 应该是选中项的值，但它仍然是null。

【问题讨论】：

标签： polymer dart

【解决方案1】：

<iron-list> 的 light DOM 不应该是一个项目列表，而是一个单一的基础 <template>（不是 dom-repeat、dom-if 等），它为 每个指定所需的 DOM 项目：

<iron-list ...>
  <template>
    ...
  </template>
</iron-list>

那个轻量级 DOM 不能是文本节点：

<iron-list ...>
  <template>
    <!-- Cannot be a text node like this -->
    <!-- [[item.name]] -->

    <div>[[item.name]]</div>
  </template>
</iron-list>

item数组数据应该绑定到<iron-list>.items:

<iron-list items="[[items]]" ...>

总的来说，它应该看起来像这样：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      items: {
        type: Array,
        value: () => [{name: 'Fred'}, {name: 'John'}]
      }
    },
    _computeClass: function(isSelected) {
      return isSelected ? 'selected' : '';
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-list/iron-list.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        iron-list {
          height: 50px;
        }
        .item.selected {
          background: lightblue;
          font-weight: bold;
        }
      </style>

      <iron-list items="[[items]]" selection-enabled selected-item="{{selectedItem}}">
        <template>
          <div class$="item [[_computeClass(selected)]]">[[item.name]]</div>
        </template>
      </iron-list>

      <h1>selected name: [[selectedItem.name]]</h1>
    </template>
  </dom-module>
</body>

codepen

【讨论】：