聚合物:在不触及阵列顺序的情况下，重复还原/排序项目

Question

这似乎是一个微不足道的事情，但我无法找到它:
如果我想在repeat中反转项的顺序，而不实际改变数组的顺序，该怎么办?

<template repeat="{{layer in layers}}">
 <div>{{layer.name}}</div>
</template>

，其中layers是对象数组。
我试过应用过滤器，然后使用数组的副本，如:

<template repeat="{{layer in layers | reverse}}">
 <div>{{layer.name}}</div>
</template>
...
reverse: function(arr){
   return _(arr).reverse();
}

，但这会导致一些观察者失败，因为他们正在查看副本而不是原始对象。我不想对我的原始数组应用排序，因为代码的其他部分依赖于该顺序。
有人知道有哪个选项只影响DOM中的显示顺序吗?

Answer 1

我认为你需要这样做

<template repeat="{{layer in temp_array}}">
 <div>{{layer.name}}</div>
</template>
<script>
     Polymer('el-name',{
         ready: function(){
             this.temp_array =[];
             this.temp_array = layers.reverse();
         }
     }
);
</script>

如果你的图层在ready调用时为空，使用change listener

<script>
         Polymer('el-name',{
             ready: function(){
                 this.temp_array =[];
             },
             layersChanged: function(oldValue, newValue){
                 if(newValue.length != 0)
                    this.temp_array = newValue.reverse();
             }
         }
    );
    </script>

希望对你有帮助

Answer 2

如果可以将重复的元素放在vertical/horizontal layout中，那么reverse可能会做到这一点(请参阅布局文档):

<div vertical layout reverse?="{{ isReversed }}">
  <template repeat="{{ layer in layers }}">
    <div>{{ layer.name }}</div>
  </template>
</div>

Answer 3

我想提供一种更安全、更清晰的方法来为repeat binding还原数组:

<polymer-element name="my-element" attributes="layers layersReversed">
  <template>
    <template repeat="{{layer in layers}}">
      <div>{{layer.name}}</div>
    </template>
  </template>
  <script>
    Polymer({
      layersReversedChanged: function() {
        var layers = this.layersReversed.slice();
        layers.reverse();
        this.layers = layers;
      }
    });
  </script>
</polymer-element>
<my-element layers="{{layers}}"><!-- direct order --></my-element>
<my-element layersReversed="{{layers}}"><!-- reverse order --></my-element>

1. 直接或反向顺序由使用的属性定义:layers或layersReversed。
2. 对应的-Changed事件本身没有值变化(可能导致掉入死循环)
3. .reverse()方法改变了原始数组，所以它应该应用于它的副本。

Answer 4

还有另一种有趣而夸张的方法可以通过中间web组件实现:

<polymer-element name="reverse-order" attributes="in out">
  <template></template>
  <script>
    Polymer({
      inChanged: function() {
        var out = this.in.slice();
        out.reverse();
        this.out = out;
      }
    });
  </script>
</polymer-element>

可以用来绑定一些顺序不同的元素。例如，数组是由.push()方法填充的，而首选数组的表示顺序是相反的:

<my-element layers="{{layersReversed}}"></my-element>
<reverse-order in="{{layers}}" out="{{layersReversed}}"></reverse-order>
<core-localstorage name="layers" value="{{layers}}"></core-localstorage>