Question

使用Polymer 0.5 <template>元素具有很多功能，如果数组为空，则允许<template if="{{items.length > 0}}">等令人敬畏的表达式轻松显示某些消息。

现在在Polymer 1.0 this has unfortunately changed，我想知道完成这项工作的最佳方法是什么。

我提出了两种情况，但我不确定哪种情况最佳。

第一个选项是在数组更改时有一个额外的变量readOnly并且computed：

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

<script>
    Polymer({
      is: 'my-element',
      properties: {
        items: {
          type: Array
        },
        itemsEmpty: {
          type: Boolean,
          computed: 'computeItemsEmpty(items)',
          readOnly: true
        }
      },
      ready: function() {
        this.items = [{'name': 'Jack'}, {'name': 'Skellington'}];
      },
      computeItemsEmpty: function(items){
        return items.length == 0;
      }
    });
</script>

第二个选项是itemsChanged的观察者设置items：

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

<script>
    Polymer({
      is: 'my-element',
      properties: {
        items: {
          type: Array,
          observer: '_itemsChanged'
        },
        itemsEmpty: {
          type: Boolean
        }
      },
      ready: function() {
        this.items = [{'name': 'Jack'}, {'name': 'Skellington'}];
      },
      _itemsChanged: function(newValue, oldValue){
        this.itemsEmpty = newValue.length == 0;
      }
    });
</script>

那么这些是最好的做法，还是有其他方法可以做到这一点？我也试过在if中使用一个函数，但当然没有重新评估。

Answer 1

在Polymer 1.0中，您仍然可以在表达式中使用对象属性。数组有长度属性，0很方便假，所以我会这样做：<template is="dom-if" if="{{items.length}}">

Answer 2

我相信也可以在那里运行一个功能。这在观察多个属性时非常有用。

<template is="dom-if" if="[[arrayEmpty(items, itemsTwo)]]">
  The array is empty!
</template>

<script>
  Polymer({
    is: 'my-element',
    properties: {
      items: {
        type: Array,
      },
      itemsTwo: {
        type: Array,
      }
    },

    arrayEmpty: function(item ,itemsTwo) {
      if(item && itemsTwo){
         return true;
      }
    }
});

聚合物如果模板绑定性能

2 个答案: