Question

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

＆＃13;

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

＆＃13;

Answer 1

我尝试了几种解决此问题的方法，并确定了两种显示空状态的方法。（实际上得到了聚合物松弛通道的帮助以及与一些样品共享信息的想法）

您可以尝试通过以下代码示例更改employee数组，方法是将项目状态设置为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>

聚合物 - 使用过滤器在嵌套的dom-repeat上显示空状态

1 个答案: