Polymer

Question

我有一个嵌套的 dom-repeat 来首先迭代公司中的员工，然后迭代员工的项目，而且在迭代项目时我使用过滤器来只获得成功的项目。尝试使用 renderedItems 但它总是提供员工数量。相反，当没有员工有任何成功的项目时，我需要一种方法来了解状态。（仅当未列出任何项目时）

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/polymer/polymer.html" />
  <script src="script.js"></script>
</head>

<body>
  <test-element></test-element>
  <dom-module id="test-element">
    <template>
      <div>
        <h1>Test Element</h1>
        <h3>Rendered Count: [[renderedCount]]</h3>
        <template is="dom-if" if="{{!renderedCount}}">
          <img src="https://emptyensemble.com/wp-content/themes/emptyensemble2015/assets/images/empty_ensemble_empty_set_logo.png" alt="Mountain View" style="width:250px;height:250px;">
        </template>
        <template is="dom-repeat" items="{{employees}}" as="employee" rendered-item-count="{{renderedCount}}">
          <template is="dom-repeat" items="{{employee.projects}}" filter="{{_filterProjects()}}" as="employeeProject">
            <span>Test 1 [[employeeProject.name]]</span>
            <br>
          </template>
        </template>
      </div>
    </template>
    <script>
      Polymer({
        is: 'test-element',
        properties: {
          employees: {
            type: Array,
            value: function() {
              return [{
                name: 'user1',
                projects: [{
                  name: 'proj1',
                  status: false
                }, {
                  name: 'proj2',
                  status: true
                }, {
                  name: 'proj3',
                  status: true
                }]
              }, {
                name: 'user2',
                projects: [{
                  name: 'proj4',
                  status: false
                }, {
                  name: 'proj5',
                  status: false
                }]
              }]
            }
          },
          renderedCount: {
            type: Number
          }
        },

        _filterProjects: function() {
          return function(item) {
            return item.status;
          };
        }
      });
    </script>
  </dom-module>
</body>

</html>

Answer 1

我尝试了几种方法来解决这个问题，并确定了两种显示空状态的方法。（其实是得到了polymer slack channel的帮助，想把资料分享给一些samples）

您可以尝试更改以下代码示例中的员工数组，将项目状态设置为 true 或 false 以查看空状态的变化。

按员工显示空状态 - 当任何员工没有成功项目时显示空状态

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/polymer/polymer.html" />
  <script src="script.js"></script>
</head>

<body>
  <test-element></test-element>
  <dom-module id="test-element">
    <template>
      <div>
        <h1>Company Projects</h1>
        <template is="dom-repeat" items="{{employees}}" as="employee" rendered-item-count="{{renderedCount}}">
          <br>
          <b><span>[[employee.name]]</span></b>
          <br>
          <div hidden$="{{_computeEmpty(employee.innercount)}}">
            <img src="https://emptyensemble.com/wp-content/themes/emptyensemble2015/assets/images/empty_ensemble_empty_set_logo.png" alt="Mountain View" style="width:250px;height:250px;">
          </div>
          <br>
          <template is="dom-repeat" items="{{employee.projects}}" filter="{{_filterProjects()}}" as="employeeProject" rendered-item-count="{{employee.innercount}}">
            <span>Project: [[employeeProject.name]]</span>
            <br>

          </template>

        </template>
      </div>
    </template>

    <script>
      Polymer({
        is: 'test-element',
        properties: {
          employees: {
            type: Array,
            value: function() {
              return [{
                name: 'user1',
                projects: [{
                  name: 'proj1',
                  status: true
                }, {
                  name: 'proj2',
                  status: false
                }, {
                  name: 'proj3',
                  status: false
                }]
              }, {
                name: 'user2',
                projects: [{
                  name: 'proj4',
                  status: false
                }, {
                  name: 'proj5',
                  status: false
                }]
              }]
            }
          },
          renderedCount: {
            type: Number
          },
          innercount: {
            type: Number
          }
        },
        _computeEmpty: function(projects) {
          return (projects > 0);
        },
        _filterProjects: function() {
          return function(item) {
            return item.status;
          };
        }
      });
    </script>
  </dom-module>
</body>

</html>

按公司显示空状态 - 当没有员工成功项目时显示空状态

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/polymer/polymer.html" />
  <script src="script.js"></script>
</head>

<body>
  <test-element></test-element>
  <dom-module id="test-element">
    <template>
      <div>
        <h1>Company Projects</h1>
        <br>
        <b><span>Succeeded Projects</span></b>
        <br>
        <br>
        <div hidden$="{{!showEmptyState}}">
          <img src="https://emptyensemble.com/wp-content/themes/emptyensemble2015/assets/images/empty_ensemble_empty_set_logo.png" alt="Mountain View" style="width:250px;height:250px;">
        </div>
        <template is="dom-repeat" items="{{employees}}" as="employee">
          <template is="dom-repeat" items="{{employee.projects}}" filter="{{_filterProjects()}}" as="employeeProject" rendered-item-count="{{renderedCount}}">
            <span>[[employee.name]]: [[employeeProject.name]]</span>
            <br>

          </template>

        </template>
      </div>
    </template>

    <script>
      Polymer({
        is: 'test-element',
        properties: {
          employees: {
            type: Array,
            value: function() {
              return [{
                name: 'user1',
                projects: [{
                  name: 'proj1',
                  status: false
                }, {
                  name: 'proj2',
                  status: false
                }, {
                  name: 'proj3',
                  status: false
                }]
              }, {
                name: 'user2',
                projects: [{
                  name: 'proj4',
                  status: false
                }, {
                  name: 'proj5',
                  status: false
                }]
              }]
            }
          },
          renderedCount: {
            type: Number,
            observer: '_onInnerRenderedCountChanged'
          },
          showEmptyState: {
            type: Boolean,
            value: true
          }
        },
        _onInnerRenderedCountChanged: function(newValue, oldValue) {
          if (newValue > 0) {
            this.set('showEmptyState', false);
          }
        },
        _filterProjects: function() {
          return function(item) {
            return item.status;
          };
        }
      });
    </script>
  </dom-module>
</body>

</html>

Polymer - 在嵌套 dom 上显示空状态 - 用过滤器重复

Polymer - Show empty state on nested dom-repeat with filter

dom-repeat