Question

如果在阵列中找不到过滤器，有人可以帮助如何显示此模板。

<template is="dom-if" if="{{itemsEmpty}}">
     The array is empty!
</template>

这是我的整个代码。但由于某些原因，dom-if模板中的if条件无法正常工作

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>

 <link rel="import" href="bower_components/polymer/polymer.html">
 <link rel="import" href="bower_components/iron-image/iron-image.html">
 <!--<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">-->
 <link rel="import" href="bower_components/paper-item/paper-item.html">
 <link rel="import" href="bower_components/paper-input/paper-input.html">
 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="bower_components/paper-listbox/paper-listbox.html">
 <link rel="import" href="bower_components/paper-button/paper-button.html">
<style>
.taller{
  height:120px;
}
[vertical-align="top"] ul {
  margin-top: 0;
}
[vertical-align="bottom"] ul {
  margin-bottom: 0;
}
button, paper-button {
  border: 1px solid #ccc;
  background-color: #eee;
  /*padding: 1em;*/
  border-radius: 3px;
  cursor: pointer;
}
button:focus {
  outline: none;
  border-color: blue;
}
</style>
</head>
<body>
     <dom-module id="employee-list">
         <template>

             <paper-input value="{{filterValue}}" label="Search For a   Company" floatingLabel id="searchCompany"></paper-input>
             <paper-dropdown-menu label="Select Project Type">
                  <paper-listbox class="dropdown-content" >
                         <template is="dom-repeat" items="{{items}}" as="test" filter="{{Filter(filterValue:input)}}">
                              <paper-item value="{{test.fname}}">{{test.fname}} - {{test.lname}}</paper-item>

         </template>
     </paper-listbox>
     </paper-dropdown-menu>
     <paper-listbox >
    <template is="dom-repeat" items="{{items}}" filter="{{Filter(filterValue)}}">
        <div class="row">
            <div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
                {{item.fname}} - {{item.lname}}
            </div>
            <hr />
            <template is="dom-if" if="{{itemsEmpty}}">
              The array is empty!
          </template>    
        </div>

    </template>
</paper-listbox>
</template>
<script>
       Polymer({
       is: 'employee-list',
       properties: {
       items: {
          type: Array,
          observer: '_itemsChanged'
       },
       filterValue: {
          type: String,
          notify:true
        },
       itemsEmpty: {
          type: Boolean
        }
      },
      ready: function() {
           this.items = [{'fname': 'Jack', 'lname':'Bayo'}, {'fname': 'Skellington','lname':'Dar' }];
      },
     _itemsChanged: function(items){
            this.itemsEmpty = items.length == 0;
      },
     Filter: function (val) {
         return function (items) {
            if (!items) return false;
            if (val != null || val != undefined) {
                return (items.fname && ~items.fname.toLowerCase().indexOf(val.toLowerCase())) ||
            (items.lname && ~items.lname.toLowerCase().indexOf(val.toLowerCase()));
        }
        else
            return true;
    };
  }
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
</html>

我将非常感谢这里的任何帮助。以下是plunker：http://plnkr.co/edit/Qy6LeAfe93u4CK2G43eX?p=preview

谢谢

Answer 1

我发现您的样品存在许多问题：

polymer.html导入会破坏您的插件（请参阅registerElement中的所有错误）。这是因为其他导入尝试从不同的URL导入Polymer
dom-if位于dom-repeat
观察items无法正常工作，因为使用filter时商品属性未被更改。

更改是renderedItemCount属性，您可以观察并使用它来控制dom-if。每当过滤器触发或items数组更改时，该属性都会更新。

总结一下：

删除聚合物导入
将dom-if移至转发器外
将绑定添加到dom-repeat：rendered-item-count="{{renderedCount}}"
更改if属性以使用实际呈现的项目计数：if="{{!renderedCount}}"

以下是元素模板的外观：

<paper-input value="{{filterValue}}" label="Search For a Company" floatingLabel id="searchCompany"></paper-input>

<paper-listbox >
  <template is="dom-repeat" items="{{items}}" filter="{{Filter(filterValue)}}" rendered-item-count="{{renderedCount}}">
    <div class="row">
      <div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
        {{item.fname}} - {{item.lname}}
      </div>
      <hr />   
    </div>               
  </template>

  <template is="dom-if" if="{{!renderedCount}}">
    The array is empty!
  </template> 
</paper-listbox>

Answer 2

这是未经测试的，但我认为 <template is="dom-if" if="{{!items}}">
应该是 <template is="dom-if" if="{{itemsEmpty}}">

想要在Polymerjs中数组为空时显示消息

2 个答案: