Geek Answers Handbook

Polymer: return / arrange elements in repetition without touching the array

This seems like a trivial thing, but I can’t find it:
What if I want to change the order of my elements in repetition without affecting the order of the array , for example:

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

where layers is an array of objects.
I tried to apply a filter and then worked with a copy of the array, for example:

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

but this leads to some observers failing as they look at the copy instead of the original objects. I do not want to apply sorting to the original array, since other parts of the code depend on this order.
Does anyone know an option that affects only the display order in the DOM?

+4
source share
4

, -

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

, .

+1

vertical/horizontal layout, reverse (. )

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

:

<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>
  • : layer layersReversed.
  • -Changed ( ).
  • .reverse() , .
0
source

There is another funny and extravagant way to do the same thing through an intermediate web component:

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

It can be used to bind some elements with a different order. Ie, the array is populated with the .push () method, and the preferred representation of the array is in the reverse order:

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

More articles:


All Articles