динамически создавать элементы в полимере и настройка атрибуты

Учитывая определение полимерного элементадинамически создавать элементы в полимере и настройка атрибуты

<dom-module id="custom-element"> 
    <template> 
    <h1>I expect to be green</h1> 
    </template> 
    <script> 
    Polymer({ 
     is: 'custom-element', 
     properties: { 
     color: { 
      type: String, 
      value: 'red' 
     } 
     }, 
     ready: function() { 
     this.style.color = this.color; 
     } 
    }); 
    </script> 
</dom-module>

Я хотел бы ожидать, что следующие два будет производить один и тот же результат:

(в разметке)

<body> 
    <custom-element color="green"></custom-element> 
</body>

(в JS)

var customElement = document.createElement('custom-element'); 
customElement.color = 'green'; 
document.body.appendChild(customElement);

Но на самом деле это не так, как это кажется, что свойства устанавливаются и «готовая» функция полимера запускается перед customElement добавляется к document.body.

Так что я не могу динамически создавать (в JS) пользовательские элементы и устанавливать их исходные свойства, отличные от свойств по умолчанию.

Как вы предлагаете мне это сделать?

Спасибо!

источник

2016-12-01 the-catalin

Установите color в attached обратный вызов вместо ready. Attached вызывается после того, как элемент был добавлен в dom.

<base href="https://polygit.org/components/"> 
 
<script src="wecomponentsjs/webcomponents-lite.min.js"></script> 
 
<link rel="import" href="polymer/polymer.html"> 
 
<dom-module id="custom-element"> 
 
    <template> 
 
    <h1>I expect to be green</h1> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'custom-element', 
 
     properties: { 
 
     color: { 
 
      type: String, 
 
      value: 'red' 
 
     } 
 
     }, 
 
     attached: function() { 
 
     this.style.color = this.color; 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module> 
 

 

 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var customElement = document.createElement('custom-element'); 
 
    customElement.color = 'green'; 
 
    document.body.appendChild(customElement); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-12-01 14:36:36 a1626

В связи с обстоятельствами моего конкретного проекта я вынужден выполнить инициализацию в обратном вызове ready(). Я могу показать вам, почему мне это нужно, но дело более сложное, чем первоначальный вопрос, который я приспособил для упрощения. –

В этом случае вы можете установить интервал в готовом состоянии, который будет в основном готов к работе до завершения вложения. – a1626

Мне удалось переместить всю инициализацию в 'прикрепленный', поэтому я пойду с этим в качестве принятого ответа. Благодаря! –

В вашем случае, я хотел бы избежать изменения DOM и использовать простой атрибут привязки.

Вот доказательство концепции: http://jsbin.com/jozejemumu/1/edit?html,js,output

Как вы можете видеть, я использовал связывание атрибута style на h1 элемент, который просто устанавливает свойство CSS цвета к любому атрибуту значение элементы color свойство есть.

Код faily простой, и выглядит следующим образом:

<dom-module id="custom-element"> 
    <template> 
     <h1 style$="color: [[color]];">I expect to be green</h1> 
    </template> 
    <script> 
     Polymer({ 
     is: 'custom-element', 
     properties: { 
      color: { 
      type: String, 
      value: 'red' 
      } 
     } 
     }); 
    </script> 
    </dom-module>

Используя элемент остается неизменным:

<custom-element color="green"></custom-element>

Или:

var customElement = document.createElement('custom-element'); 
    customElement.color = 'orange'; 
    document.body.appendChild(customElement);

Просто убедитесь, что color свойство содержит допустимое имя/значение цвета HTML.

источник

2016-12-01 18:34:13 alesc

динамически создавать элементы в полимере и настройка атрибуты

ответ

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