聚合物：創建一個「通用」自定義元素

我正在嘗試構建一個具有指定哪個元素應該發生此元素的屬性的元素。聚合物：創建一個「通用」自定義元素

我有我使用FO這個目的，在index.html的被定義爲一個3D卡翻蓋元素：

<html> 
    <head> 
     <script src="bower_components/webcomponentsjs/webcomponents.js"> 
     </script> 
     <link rel="import" href="elements/general-element.html"> 
    </head> 
    <body> 
     <general-element 
      name="card-flip" 
      address="elements/card-flip.html"> 
      <front> 
       FRONT 
      </front> 
      <back> 
       BACK 
      </back> 
     </general-element> 
    </body> 
</html>

的一般element.html這裏定義：

<link rel="import" 
    href="../bower_components/polymer/polymer.html"> 
<polymer-element name="general-element" attributes="name address"> 
    <template> 
     <div id="element_here"> 
     </div> 
    </template> 
    <script> 

     function addElementToDOM(element_name, _that) { 
      var elem = _that.shadowRoot.querySelector("#element_here"); 
      add_elem = document.createElement(element_name); 
      elem.appendChild(add_elem); 
     } 

     Polymer ('general-element', { 
      ready: function() { 
       if ( 
        (this.address != undefined) && 
        (this.name != undefined)) { 

        Polymer.import( 
         [this.address], 
         addElementToDOM(this.name, this) 
       ); 
       } 
      } 
     }); 
    </script> 
</polymer-element>

警告：輸出是空白，並在控制檯中出現錯誤，說卡片翻轉時的屬性是在Polymer升級元素之前綁定的數據。這可能會導致不正確的綁定類型。

這可以以任何方式實現嗎？

來源

2015-02-10 Igor L.

這很難說，你想達到什麼樣的，但我會在你的代碼中的一些小故障點，並提供工作版本paper-button代替flip-card（因爲我沒有任何的flip-card代碼。）

TL; DR實時預覽：http://plnkr.co/edit/yO865EkclZAsWBhzVSU4?p=preview

的主要問題與您的代碼是你調用函數addElementToDOM，而不是把它當作一個回調的Polymer.import的要求的。 function() { addElementToDOM(...); }會好的。
對傳統上禁止的自定義元素（如front和back）使用連字符名稱。請用我的例子中的虛線。
你的功能沒有理由被污染到全球空間。我把它放在一個元素裏面。
您很可能希望把front和back之間的自定義flip-card，但沒有content select='front/back'標籤模板內的遺蹟。
您正在嘗試以不正確的方式訪問shadowRoot。您可能需要查看getDistributedNodes函數，但在這種情況下，使用命名約定和簡單地通過this.$.elementHere來尋址元素更容易。
你應該明確地指定<body unresolved>爲填充來照顧未解決的事情。

工作代碼：

<!doctype html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
    <title>Add paper button</title> 
    <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
    <link href="https://www.polymer-project.org/components/polymer/polymer.html" rel="import"> 
</head> 

<body unresolved> 
    <polymer-element name="general-element" attributes="name address"> 
    <template> 
     <content select='my-front'></content> 
     <div id="elementHere"> 
     </div> 
     <content select='my-back'></content> 
    </template> 
    <script> 
     Polymer ({ 
     addElementToDOM: function (element_name) { 
      var elem = this.$.elementHere; 
      add_elem = document.createElement(element_name); 
      add_elem.appendChild(document.createTextNode('¡Hola!')); 
      elem.appendChild(add_elem); 
     }, 

     domReady: function() { 
      if (this.address && this.name) { 
      var self = this; 
      Polymer.import( 
       [self.address], 
       function() { self.addElementToDOM(self.name); } 
      ); 
      } 
     } 
     }); 
    </script> 
    </polymer-element> 
    <general-element 
     name="paper-button" 
     address="https://www.polymer-project.org/components/paper-button/paper-button.html"> 
     <my-front> 
      FRONT 
     </my-front> 
     <my-back> 
      BACK 
     </my-back> 
    </general-element> 
</body> 
</html>

我敢打賭，你的代碼可以通過應用補丁＃1在工作，但我強烈建議你解決其他故障也是如此。希望能幫助到你。

P.S.爲什麼你需要動態地導入你的元素？簡單有什麼問題

<template> 
     <content select='my-front'></content> 
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ --> 
     <flip-card></flip-card> 
     <content select='my-back'></content> 
    </template>

來源

2015-02-10 17:11:38 mudasobwa

感謝您的幫助，我也從您的觀察中學到了新東西。我之所以需要這樣的通用元素，是因爲項目的前端將根據提供的數據和用戶操作動態更改。 – 2015-02-11 17:07:51

好的，很高興聽到答案是有幫助的。 – mudasobwa 2015-02-11 17:14:15

聚合物：創建一個「通用」自定義元素

回答

相關問題