Почему полимер не вставляет содержимое?

Я пытаюсь понять веб-компонентов, поэтому я хочу, чтобы создать веб-компонент, который бы «обернуть» в select тег в select2.Почему полимер не вставляет содержимое?

Вот мой главный HTML:

<html> 
    <head> 
    <title>Web components</title> 
    <meta charset="utf-8"></meta> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
    <link rel="import" href="elements/select2-select.html"></link> 
    </head> 
    <body> 
    <div> 
     <select2-select> 
     <option value="A">A</option> 
     <option value="B">B</option> 
     <option value="C">C</option> 
     </select2-select> 
    </div> 
    </body> 
</html>

И мой заказ элемент:

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

<polymer-element name="select2-select"> 
    <template> 
    <select id="main"> 
     <content></content> 
    </select> 
    </template> 
    <script>Polymer({});</script> 
</polymer-element>

проблема в том, что option теги не вставляются в теневом DOM:

dom-example

Что я делаю неправильно? Я запускаю Firefox на Ubuntu 14.04.2, если это так или иначе актуально.

спасибо.

источник

2015-05-11 art-solopov

Какую версию Polymer вы используете? – Adi

Я использую Polymer 0.5.6. –

Я предлагаю использовать 0.9 уже, так как 0.5, вероятно, больше не получит никаких новых новых функций, только исправления ошибок. – Jouni

Да, это самый простой способ использовать атрибуты. Я изменил ваш оригинальный скрипт, чтобы он работал.

Главная HTML:

<html> 
    <head> 
    <title>Web components</title> 
    <meta charset="utf-8"></meta> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
    <link rel="import" href="elements/select2-select.html"></link> 
    </head> 
    <body> 
    <div> 
     <select2-select options='[ 
     {"value":"1","text":"1"}, 
     {"value":"2","text":"2"}, 
     {"value":"3","text":"3"}, 
     {"value":"4","text":"4"} 
     ]'></select2-select> 
    </div> 
    </body> 
</html>

пользовательский элемент:

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<polymer-element name="select2-select" attributes="options"> 
    <template> 
    <select id="main"> 
     <template repeat="{{option in options}}"> 
     <option value={{option.value}}>{{option.text}}</option> 
     </template> 
    </select> 
    </template> 
    <script> 
    Polymer('select2-select', { 
     publish: { 
      options: {}, 
     } 
    }); 
    </script> 
</polymer-element>

источник

2015-05-12 13:27:30

Первое, что я могу придумать, это то, что JQuery & Select2 не доступны для элемента, потому что вы добавили их в глобальную область. Согласно разделу The Golden Standard Раздел выраженных зависимостей Веб-компоненты должны нести ответственность за свои собственные зависимости.

Другое дело, что некоторые HTML-элементы будут отображаться только внутри других конкретных элементов. Например, если я добавлю option теги к div, они не будут отображаться, если они не будут обернуты тегом select.

источник

2015-05-12 11:13:10

1. Я даже не начал добавлять jQuery или Select2, потому что я не мог заставить '' работать правильно. 2. Хотя «странные» элементы могут отображаться некорректно, они все равно будут присутствовать в DOM, например [здесь] (http://i.imgur.com/Zv1IuXy.png) –

Почему полимер не вставляет содержимое?

ответ

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