Iterar sobre una matriz myarray=[1, 2, 3] trabaja como esto:

<template is="dom-repeat" items="[[myarray]]">
    <span>[[item]]</span>
</template>

¿Cómo puedo iterar sobre un objeto myobject = {a:1, b:2, c:3}?

InformationsquelleAutor Tamas | 2015-06-11

6 Comentarios

  1. 49

    Aquí es una completa aplicación:

    <test-element obj='{"a": 1, "b": 2, "c": 3}'></test-element>
    
    <dom-module id="test-element">
        <template>
    
            <template is="dom-repeat" items="{{_toArray(obj)}}">
                name: <span>{{item.name}}</span>
                <br> value: <span>{{item.value}}</span>
                <br>
                <hr>
            </template>
    
        </template>
        <script>
        Polymer({
    
            properties: {
                obj: Object
            },
    
            _toArray: function(obj) {
                return Object.keys(obj).map(function(key) {
                    return {
                        name: key,
                        value: obj[key]
                    };
                });
            }
    
        });
        </script>
    
    </dom-module>
  2. 9

    Yo enfrentan el mismo problema, pero mi caso de uso es un poco más exigente: necesito dos-manera profunda unión a través de la repetición. Además de que no puede permitirse el lujo de reescritura de todo el árbol, en cada cambio.

    Ya que no he podido encontrar una solución y el polímero equipo parece tener poco a poco en este tema, se me hizo algo por el momento. Está escrito en ES2015, pero la traducción que de la vainilla ES5 debe ser sencillo. Se ejecuta en Chrome de todos modos como es. O tirarlo en bable. Esta página detalles de cómo. La esencia para el propósito de esta publicación:

    vulcanize element.html --inline-script --inline-css | \
        crisper -h element.v.html -j element.js;
    babel element.js -o element.js

    Así que aquí vamos:

    <link rel="import" href="../../bower_components/polymer/polymer.html">
    <dom-module id="my-objarray">
    <script>
    (function() {
    'use strict';
    class Objarray {
    beforeRegister() {
    this.is = 'my-objarray';
    this.properties = {
    array:{
    notify:true,
    type:Array,
    value:function() {return new Array();}
    },
    object:{
    notify:true,
    type:Object
    }
    };
    this.observers = ['_onArray(array.*)', '_onObject(object.*)'];
    }
    _onObject(change) {
    if(this._setting) return;
    if(change.path == "object") this._rewriteArray();
    else this._writeElement(change);
    }
    _rewriteArray() {
    this.splice("array", 0, this.array.length);
    for(let i in this.object) {
    this.push("array", {key:i, value:this.object[i]});
    }
    }
    _writeElement(change) {
    const path = change.path.match(/^object\.([^\.]+)(.*)$/);
    const key = path[1];
    const objectPath = "object." + key + (path[2] || "");
    const id = this._getId(key);
    const arrayPath = "array." + id + ".value" + (path[2] || "");
    this.set(arrayPath, this.get(objectPath));
    }
    _getId(key) {
    const collection = Polymer.Collection.get(this.array);
    for(const element of this.array) {
    if((element && element.key) === key) {
    return collection.getKey(element);
    }
    }
    }
    _onArray(change) {
    let path = change.path.match(/^array\.(#\d+)\.([^\.]+)(\.|$)/);
    if(!path) return;
    let id = path[1], field = path[2];
    if(field == "key") throw new Error("my-objarray: Must not change key!");
    if(field != "value") throw new Error("my-objarray: Only change inside value!");
    this._setting = true;
    this.set(this._getPath(change, id), change.value);
    delete this._setting;
    }
    _getPath(change, id) {
    let collection = Polymer.Collection.get(change.base);
    let index = change.base.indexOf(collection.getItem(id));
    let key = change.base[index].key;
    return change.path.replace("array." + id + ".value", "object." + key);
    }
    }
    Polymer(Objarray);
    })();
    </script>
    </dom-module>

    Uso:

    <dom-module id="my-objarray-test">
    <template strip-whitespace>
    <my-objarray object="{{items}}" array="{{array}}"></my-objarray>
    <template is="dom-repeat" items="{{array}}">
    <div>
    <label>{{item.key}}:</label>
    <input type="number" value="{{item.value.data::input}}">
    </div>
    </template>
    </template>
    <script>
    (function() {
    'use strict';
    class ObjarrayTest {
    beforeRegister() {
    this.is = 'my-repeat-test';
    this.properties = {
    items:{
    notify:true,
    type:Object,
    value:function() {return new Object();}
    }
    };
    this.observers = ['_onItems(items.*)'];
    }
    ready() {
    console.log("my-repeat-test.ready");
    this.items = {a:{data:1}, b:{data:2}};
    }
    _onItems(change) {console.log("test._onItems", change.path);}
    }
    Polymer(ObjarrayTest);
    })();
    </script>
    </dom-module>

    Espero que ayude a alguien. Presumible polímero ahora obtiene la función de mañana 🙂

  3. 3

    He estado usando Object.keys(obj).map(function(prop){return {id:prop, val:obj[prop]}})

    • Gracias! Haces un elemento personalizado «dom-repetir-mapa» o algo así? Porque me temo que las expresiones no son permitidos en los atributos de etiquetas.
    • Que por lo general en un calculada de unión, o procesados antes de la unión.
  4. 2

    Revisando esta para dar cuenta de los problemas que otros han mencionado. Esto es compatible con todos los navegadores y utiliza hasOwnProperty.

    <template is="dom-repeat" items="[[_toArray(obj)]]">
    key: [[item.key]] val: [[item.val]]
    </template>

    _toArray: function(obj, deep) {
    var array = [];
    for (var key in obj) {
    if (deep || obj.hasOwnProperty(key)) {
    array.push({
    key: key,
    val: obj[key]
    });
    }
    }
    return array;
    }
  5. 1

    Usted necesita para convertir este objeto en un significativo matriz para ser capaz de recorrer con la dom-repeat.

    He creado un myObj de la propiedad con el valor inicial. Entonces he creado una propiedad llamada myObjAsArray que es un conjunto vacío. En el ready función de devolución de llamada que se llama cuando el local dom está listo, estoy de iterar sobre todas las propiedades de myObj y la adición de ellos a myObjAsArray (ver aquí de cómo iterar a través de las propiedades de un objeto). Se puede iterar sobre esta matriz con dom-repeat.

    <link rel="import" href="bower_components/polymer/polymer.html">
    <dom-module id="test-element">
    <style>
    </style>
    <template>
    <template is="dom-repeat" items="{{myObjAsArray}}">
    name: <span>{{item.name}}</span>
    value: <span>{{item.value}}</span>
    </template>
    </template>
    </dom-module>
    <script>
    Polymer({
    is: "test-element",
    properties: {
    myObj: {
    type: Object,
    value: function () {
    return {
    a: 1,
    b: 2,
    c: 3
    };
    }
    },
    myObjAsArray: {
    type: Array,
    value: function () {
    return [];
    }
    }
    },
    attached: function () {
    var propArray = [];
    for (var prop in this.myObj) {
    if (this.myObj.hasOwnProperty(prop)) {
    propArray.push({name: prop, value: this.myObj[prop]});
    }
    }
    this.myObjAsArray = propArray;
    }
    });
    </script>
    • Gracias! Todavía estoy esperando una versión más corta… Objeto.las teclas() podría ser utilizado en lugar de su bucle for, pero que no hacen mucho más cortos.
    • No estoy seguro de que hay mucho más que usted puede hacer. Sólo puede utilizar un array en el dom-repeat. Incluso he intentado utilizar una función que devuelve un array, pero que no parecen trabajar.
  6. 0

    Objeto.las teclas() no funciona en IE. Así modificado la aplicación para que utilice _.mapa del lugar.

    <test-element obj='{"a": 1, "b": 2, "c": 3}'></test-element>
    <dom-module id="test-element">
    <template>
    <template is="dom-repeat" items="{{getKeyValue(obj)}}">
    key: <span>{{item.key}}</span>
    <br> value: <span>{{item.value}}</span>
    <br>
    <hr>
    </template>
    </template>
    <script>
    Polymer({
    properties: {
    obj: Object
    },
    getKeyValue: function(obj) {
    return _.map(obj, function(value, key) {
    return {
    key: key,
    value: value
    };
    });
    }
    });
    </script>
    </dom-module>

    https://jsfiddle.net/avidlearner/36jnb16d/

Dejar respuesta

Please enter your comment!
Please enter your name here