पॉलिमर 1.0 में सरणी के बजाय ऑब्जेक्ट्स के साथ डोम-दोहराना का उपयोग कैसे करें?

Question

पुनरावृत्ति एक सरणी से अधिक इस तरह myarray=[1, 2, 3] काम करता है:

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

मैं कैसे एक वस्तु myobject = {a:1, b:2, c:3} से अधिक पुनरावृति कर सकते हैं?

Answer 1

यहाँ का उपयोग कर एक पूर्ण कार्यान्वयन है:

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

Answer 2

आपको इस ऑब्जेक्ट को एक सार्थक सरणी में बदलने की आवश्यकता है ताकि dom-repeat के साथ इसे फिर से चालू किया जा सके।

मैंने शुरुआती मूल्य के साथ myObj संपत्ति बनाई है। मैंने फिर myObjAsArray नामक एक संपत्ति बनाई है जो एक खाली सरणी है। ready कॉलबैक फ़ंक्शन जिसे स्थानीय डोम तैयार किया जाता है, मैं myObj के सभी गुणों पर पुन: प्रयास कर रहा हूं और उन्हें myObjAsArray में जोड़ रहा हूं (here देखें कि ऑब्जेक्ट गुणों के माध्यम से पुनरावृत्ति कैसे करें)। फिर आप 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> 

Answer 3

मैं Object.keys(obj).map(function(prop){return {id:prop, val:obj[prop]}})

Answer 4

मैं एक ही समस्या का सामना करना पड़ा, लेकिन मेरी यूज-केस में थोड़ा और अधिक मांग है: मैं दो की जरूरत है दोहराव के माध्यम से गहरी बाध्यकारी। इसके अलावा मैं प्रत्येक परिवर्तन पर पूरे पेड़ को फिर से लिखने का जोखिम नहीं उठा सकता।

चूंकि मुझे कोई समाधान नहीं मिला और बहुलक टीम धीरे-धीरे इस मुद्दे पर इसे लेती प्रतीत होती है, मैंने समय के लिए कुछ बनाया है। यह ES2015 में लिखा गया है, लेकिन वेनिला ES5 में अनुवाद करना सीधा होना चाहिए। वैसे भी क्रोम में चलता है। या इसे बेबल पर फेंक दें। This page विवरण कैसे। इस पोस्ट करने का उद्देश्य के लिए सार:

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

तो यहाँ हम चले:

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

उपयोग:

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

आशा है कि किसी को मदद मिलती है। अनुमानित बहुलक अब कल की तरह सुविधा प्राप्त करता है :-)

Answer 5

ऑब्जेक्ट.की() आईई में काम नहीं कर रहा है। तो इसके बजाय _.map का उपयोग करने के लिए कार्यान्वयन में संशोधन किया गया।

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

Answer 6

इस रिविजिटिंग मुद्दों दूसरों का उल्लेख किया है के लिए खाते। यह सभी ब्राउज़रों के साथ संगत है और 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; 
}