如果数组在 Polymer Js 中为空，则想要显示消息

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

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

Answer 2

我发现您的示例存在一些问题：

polymer.html 导入打破了你的错误（查看 registerElement 中的所有错误）。那是因为其他导入尝试从不同的 URL 导入 Polymer
dom-if在dom-repeat
观察 items 将不起作用，因为当您使用 filter 时项目属性没有改变。

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

总结一下：

移除 Polymer 导入
将 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>

如果数组在 Polymer Js 中为空，则想要显示消息

Want to Display message if the array is empty in Polymerjs

web-component

polymer

polymer-1.0