Polymer: создать «общий» пользовательский элемент

Я пытаюсь создать элемент с атрибутами, которые будут указывать, какой элемент должен состояться из этого элемента.Polymer: создать «общий» пользовательский элемент

У меня есть флип-элемент 3d-карты, которые я использую Ф.О. этих целей в index.html, который определяется как:

<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 Live Preview: http://plnkr.co/edit/yO865EkclZAsWBhzVSU4?p=preview

Основная проблема с вашим кодом является то, что вы называете функцию addElementToDOM вместо передачи его в качестве обратного вызова по требованию Polymer.import. function() { addElementToDOM(...); } было бы в порядке.
Вы используете дефисные имена для пользовательских элементов (например, front и back), которые традиционно запрещены. Пожалуйста, используйте пунктир, как в моем примере.
У вас есть функция, загрязненная в глобальном пространстве без причины. Я положил его внутри элемента.
Вы, вероятно хотите ставит свой обычай flip-card между front и back, но нет пережитка 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

Спасибо за это, помогли много, и я также узнал о новых вещах из ваших наблюдений. Причина, по которой мне нужен общий элемент, как это, заключается в том, что передняя часть проекта будет динамически изменяться в соответствии с данными и данными пользователя. –

Хорошо, приятно услышать ответ был полезен. – mudasobwa

Polymer: создать «общий» пользовательский элемент

ответ

Смежные вопросы