Question

我有iron-list显示我的项目：

<iron-list id="list" items="[[items]]" as="item"  selection-enabled multi-selection>
  <template>
  ...
  </template>
</iron-list>

一切正常，但我从外部服务获得items，这需要时间，因此我希望在收到数据之前显示一个微调器。

所以我尝试了这个：

<template is="dom-if" if="[[!items]]">
  <paper-spinner-lite alt="Loading items list" active></paper-spinner-lite>
</template>

<template is="dom-if" if="[[items]]">
  <iron-list id="list" items="[[items]]" as="item"  selection-enabled multi-selection>
    <template>
       ...
    </template>
  </iron-list>
</template>

但它不起作用 - 即使从后端服务加载，items也根本不显示。

通过实验，我发现在添加第一个items后<template is="dom-if" if="[[!items]]">停止显示。删除它后（保留微调器和第二个template if），items在加载时开始显示。

错误在哪里？

Answer 1

items是Array，Javascript中的数组（甚至是空数组）为truthy，因此[[!items]]的绑定始终会评估为false

您可以使用computed binding来评估items的长度：

// template
<template is="dom-if" if="[[_isEmpty(items.*)]]">...</template>
<template is="dom-if" if="[[!_isEmpty(items.*)]]">...</template>

// script
Polymer({
  ...
  _isEmpty: function() {
    return this.items.length === 0;
  }
);

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-list/iron-list.html">
  <link rel="import" href="paper-spinner/paper-spinner-lite.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <style>
      iron-list {
        height: 400px;
      }
    </style>
    <template>
      <template is="dom-if" if="[[_isEmpty(items.*)]]">
        <paper-spinner-lite alt="Loading items list" active></paper-spinner-lite>
      </template>

      <template is="dom-if" if="[[!_isEmpty(items.*)]]">
        <iron-list items="[[items]]">
          <template>
            <div>[[index]]: [[item]]</div>
          </template>
        </iron-list>
      </template>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties: {
            items: {
              type: Array,
              value: function() {
                return [];
              }
            }
          },
          _isEmpty: function() {
            return this.items.length === 0;
          },
          _loadData: function() {
            console.log('loading data...');
            for (var i = 0; i < 100; i++) {
              this.push('items', Math.random());
            }
          },
          ready: function() {
            this.async(this._loadData, 2000);
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

或者您可以声明Boolean属性，由基于true的观察者设置为items（这基本上是上述解决方案的较长版本）：

// template
<template is="dom-if" if="[[_isEmpty]]">...</template>
<template is="dom-if" if="[[!_isEmpty]]">...</template>

// script
Polymer({
  ...
  properties: {
    ...
    _isEmpty: {
      type: Boolean,
      value: true
    }
  },
  observers: [
    '_setEmpty(items.*)'
  ],
  _setEmpty: function() {
    this._isEmpty = this.items.length === 0;
  }
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-list/iron-list.html">
  <link rel="import" href="paper-spinner/paper-spinner-lite.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <style>
      iron-list {
        height: 400px;
      }
    </style>
    <template>
      <template is="dom-if" if="[[_isEmpty]]">
        <paper-spinner-lite alt="Loading items list" active></paper-spinner-lite>
      </template>

      <template is="dom-if" if="[[!_isEmpty]]">
        <iron-list items="[[items]]">
          <template>
            <div>[[index]]: [[item]]</div>
          </template>
        </iron-list>
      </template>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties: {
            items: {
              type: Array,
              value: function() {
                return [];
              }
            },
            _isEmpty: {
              type: Boolean,
              value: true
            }
          },
          observers: [
            '_setEmpty(items.*)'
          ],
          _setEmpty: function() {
            this._isEmpty = this.items.length === 0;
          },
          _loadData: function() {
            console.log('loading data...');
            for (var i = 0; i < 100; i++) {
              this.push('items', Math.random());
            }
          },
          ready: function() {
            this.async(this._loadData, 2000);
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

铁列表和旋转器不能一起工作

1 个答案: