¿Cómo usar dom-repeat con objetos en lugar de matrices en Polymer 1.0?

Iterar sobre una matriz myarray=[1, 2, 3] funciona así:

  [[item]]  

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

Aquí hay una implementación completa:

       

Me enfrenté al mismo problema, pero mi caso de uso es un poco más exigente: necesito un enlace profundo bidireccional a través de la repetición. Además, no puedo permitirme reescribir todo el árbol en cada cambio.

Como no encontré una solución y el equipo de polymers parece tomarlo con calma en este aspecto, hice algo por el momento. Está escrito en ES2015, pero traducirlo a ES5 vainilla debe ser sencillo. Se ejecuta en Chrome de todos modos como está. O tíralo al bable. Esta página detalla 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:

     

Uso:

      

Espero que ayude a alguien. El polymer presumible ahora tiene la característica como mañana 🙂

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

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

  

 _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; } 

Debe convertir este objeto en una matriz significativa para poder iterar sobre él con la dom-repeat .

myObj una propiedad myObj con el valor inicial. Luego creé una propiedad llamada myObjAsArray que es una matriz vacía. En la función de callback ready que se llama cuando el dom local está listo, estoy iterando sobre todas las propiedades de myObj y las agrego a myObjAsArray (mire aquí cómo iterar a través de las propiedades de un objeto). A continuación, puede iterar sobre esta matriz con dom-repeat .

        

Object.keys () no parece funcionar en IE. Así que modificó la implementación para usar _.map en su lugar.

       

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