聚合物：创建一个“通用”自定义元素

我正在尝试构建一个具有指定哪个元素应该发生此元素的属性的元素。聚合物：创建一个“通用”自定义元素

我有我使用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

聚合物：创建一个“通用”自定义元素

回答

相关问题