Question

这是代码的子集，使用<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。

Answer 1

<iron-list>的轻量级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>

项目数组数据应绑定到<iron-list>.items：

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

总而言之，它应该与此类似：

＆＃13;

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

＆＃13;

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

＆＃13;

codepen

Polymer-Dart铁列表不绑定到选定项目

1 个答案: