dom-repeate中的聚合物動態元素名稱

如何使用dom-repeat爲鐵質頁面創建不同的元素？這樣的事情：dom-repeate中的聚合物動態元素名稱

<template is="dom-repeat" items="{{pages}}"> 
    <[[item.name]]></[[item.name]]> 
</template> 

... 

pages: { 
    type: Array, 
    value() { 
    return [ 
     { 
     "name": "element-a", 
     }, 
     { 
     "name": "element-b", 
     }, 
     { 
     "name": "element-c", 
     }, 
},

我正在使用聚合物2.0。

來源

2017-04-16 Zvi Karp

您可以通過使用Javascript做到這一點。 '

'和forEach在div上添加所需的自定義元素。 –

謝謝！現在的問題是它在創建父div之前運行js，所以如何在內調用聚合函數，才能在div加載後運行js？ –

檢查div之後的腳本標籤。喜歡：'

' –

由於我的評論有一些興趣，我把它作爲答案。

的代碼示例將在聚合物1.9現在，我會更新我的答案時，我會做切換到2.0，但思路應該是你需要一個包裝元素相同反正

首先，至極將能夠從屬性動態創建另一個元素，並將其添加到自身中。在我的示例中，要創建的元素的名稱將是一個名爲type的JSON對象Data的屬性，它來自XHR中的數據庫。

使用動態創建的元素，綁定將不起作用，因此您必須手動完成。這就是_updateState函數的作用，在這裏它只更新一個屬性，但想法是一樣的，還有更多。

包裝：

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../styles/shared-styles.html"> 

<dom-module id="element-wrapper"> 
    <template></template> 
    <script> 
     Polymer({ 
      is: 'element-wrapper', 
      properties: { 
       elementData: { 
        type: Object 
       }, 
       saveFbPath: { 
        type: String 
       }, 
       element: { 
        type: Object 
       }, 
       formSubmitPressed: { 
        type: Boolean, 
        value: false 
       } 
      }, 
      observers: [ 
       '_updateState(elementData.*)' 
      ], 
      attached: function() { 
       console.log("creating element : ", this.elementData); 
       this.async(function() { 
        this.element = this.create(this.elementData.type, { 
         "data": this.elementData 
        }); 
        this.appendChild(this.element); 
       }.bind(this)); 
      }, 
      _updateState: function (elementData) { 
       if (typeof this.element !== "undefined") { 
        this.element.data = elementData.value; 
        console.log('Change captured', elementData); 
       } 
      } 
     }); 
    </script> 
</dom-module>

的this.element = this.create(this.elementData.type, {"data":this.elementData});線是一個創建該元素，第一個參數是dom-module名稱，並且第二JSON對象至極將被綁定到該元素的屬性。然後 this.appendChild(this.element);將它添加到DOM

這一切都是在一個this.async通話更流暢顯示

然後，您需要一個DOM重複它會調用這個元素，並給它需要建立DATAS動態的。下面是一個element-list的例子，但是您不需要特定的元素，因爲這個邏輯可以更大一些。

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../styles/shared-styles.html"> 

<link rel="import" href="element-wrapper"> 
<dom-module id="element-list"> 
    <template> 
     <style is="custom-style" include="shared-styles"></style> 
     <template is="dom-repeat" items="[[ datas ]]" initial-count="10" as="data"> 
      <element-wrapper element-data="[[data]]"></element-wrapper> 
     </template> 
    </template> 
    <script> 
     Polymer({ 
      is: 'element-list', 
      properties: { 
       datas: { 
        type: Array, 
        value: function() { 
         return []; 
        } 
       } 
      } 
     }); 
    </script> 
</dom-module>

這應該做的伎倆:)

來源

2017-04-19 12:24:13 Arfost

dom-repeate中的聚合物動態元素名稱

回答

相關問題