Question

这似乎是一件微不足道的事情，但我无法找到它：
如果我想在重复中反转我的项目的顺序，而不是实际接触数组的顺序，如下所示：

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

如果在调用就绪时图层为空，请使用更改侦听器

<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可能会有效（请参阅layout documentation）：

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

Answer 3

我想提供一种更安全，更清晰的方法来恢复重复绑定的数组：

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

直接或反向顺序由used属性：layers或layersReversed。
相应的-Changed事件本身没有任何值的变化（这可能会导致无限循环）。
.reverse（）方法更改原始数组，因此应将其应用于其副本。

Answer 4

通过中间网络组件，还有另一种有趣且奢侈的方法：

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

聚合物：重复/订购重复项目而不触及数组顺序

4 个答案: