Полимерные элементы в приложении Meteor

Кто-нибудь успешно добавил элементы Полимера в проект Meteor? Я изо всех сил пытаюсь заставить его работать.

Я пробовал использовать беседку для установки пакета Polymer под общественностью:

├── public
│   ├── bower_components
│   │   ├── platform
│   │   └── polymer
│   ├── elements
│   │   └── my-element.html

Затем я включил элемент вроде этого:

<head>
  <title>test</title>
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="elements/my-element.html">
</head>
<body>
  ...
  <my-element></my-element>
  ...
</body>

Это приводит к бесконечному циклу запросов XHR для platform.js и my-element.html.

Я также пробовал пакет meteor-polymer, который не включает файл polymer.html, и я не мог заставить его распознавать пакет в любом случае:

=> Errors prevented startup:

While building the application:
error: no such package: 'polymer'

Я надеюсь, что кто-то сможет заставить Polymer работать с Meteor, так как я действительно хотел бы использовать мои компоненты в этом приложении.

Ответы

Ответ 1

Я создал пакет для добавления функциональности Polymer в Meteor.

Вот github.

http://github.com/ecwyne/meteor-polymer

Обновление: Его можно также добавить с помощью meteor add ecwyne:polymer-elements

Ответ 2

Если у вас все еще есть проблемы с добавлением и использованием Polymer в Meteor, здесь будет работать подход.

Мы собираемся добавить Polymer в проект Meteor, используя Bower.

После создания своего приложения Meteor перейдите в каталог приложений и выполните следующие действия:

  • $ bower init = > Это позволит вам выполнить шаги, необходимые для создания файла bower.json через терминал.

Теперь добавим компоненты Polymer:

  1. $ bower install --save Polymer/polymer

  2. bower install --save Polymer/webcomponentsjs

  3. bower install --save Polymer/core-elements

  4. bower install --save Polymer/paper-elements

Теперь у нас будет каталог bower_components внутри корневой папки приложения, который содержит компоненты Polymer. Создайте еще одну папку под названием public и переместите bower_components в папку public, чтобы мы имели public/bower_components.

Здесь простую часть кода вы можете заменить содержимое yourappname.html на.

<head>
<title>Athman Polymer Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">

<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    body {
        font-family: sans-serif;
    }
    core-scaffold {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
    }
    #core_card {
        width: 96%;
        height: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        margin: 2%;
        background-color: rgb(255, 255, 255);
        text-align: left;
    }
    paper-fab {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
</style>
</head>
<body >
<core-scaffold>
    <core-header-panel navigation flex mode="seamed">
        <core-toolbar id="core_toolbar">Navigation</core-toolbar>
        <core-menu theme="core-light-theme">
            <core-item icon="settings" label="item1"></core-item>
            <core-item icon="settings" label="item2"></core-item>
        </core-menu>
    </core-header-panel>
    <div tool>Test Project</div>
    <core-card id="core_card" vertical layout start>
        <div style="padding: 20px;">This is a sample project</div>
    </core-card>
    <paper-toast id="toast1" text="Created by Nic Raboy"></paper-toast>
</core-scaffold>
<paper-fab icon="add" onclick="document.querySelector('#toast1').show()"></paper-fab>
</body>

Теперь давайте запустим наше приложение...

  1. $ meteor

Наслаждайтесь Полимером

Кредиты: Ник Рабой: Использование полимера с Apache Cordova

Ответ 3

Извините, что у вас возникли проблемы с тем, чтобы Метеор и Полимер хорошо играли вместе. Приведенные выше комментарии объясняют ситуацию с системой Template для Meteor, но в случае, если это полезно:

В команде Polymer мы создали инструмент Vulcanize, который может сгладить (объединить) все стили, сценарии и зависимости, необходимые для полимерных элементов в один файл. Это устраняет необходимость в любых вызовах XHR/Ajax, если какой-либо элемент не вызывается на удаленный сервер где-либо.

Здесь guide, чтобы использовать инструмент Vulcanize, который может помочь в этом.

Ответ 4

Я так же играл с этими обоими. Это не так красиво, но я получаю их вместе.

<head> <title>my-app</title> <script src="/polymer/platform.js"></script> <link rel="import" href="/polymer/polymer.html"> </head>

так

в моем общедоступном каталоге

/public/polymer/polymer.html
/public/polymer/other-polymer-files

пакет метеорного полимера устарел

Ответ 5

Несмотря на то, что для полимера имеется пакет метеорита (https://atmospherejs.com/package/polymer), который кажется многообещающим.

Если вы хотите добавить файлы javascript самостоятельно, вы можете попробовать поставить их под:

client/compatibility/

Если вы этого не сделаете, у вас не будет доступа к глобальным переменным полимера, так как в обычных javascript globals - это просто переменные, созданные как var myGlobal; вне любой функции.

Я интересуюсь тем, как метеор собирается разрешать синтаксис шаблонов полимеров, подобный рулям.

`

Ответ 6

@jamstooks У меня такая же структура папок, как и у вас, и у меня была такая же проблема.

Наконец-то он работает → Try:

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />

а затем оставьте теги "my-element" и просто используйте веб-компоненты. Например:

<core-scaffold id="core_scaffold">
  <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar">
    </core-toolbar>
    <core-menu valueattr="label" id="core_menu" theme="core-light-theme">
      <core-item id="core_item" icon="settings" label="Item1" horizontal center layout active></core-item>
      <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
    </core-menu>
  </core-header-panel>
  <div id="div" tool>Your App Title
  </div>
   <core-pages selected="0" selectedindex="0" notap id="core_pages">
    <section id="section" active>
    </section>
    <section id="section1">Page Two</section>
  </core-pages>

</core-scaffold>

С Meteor 1.0.2.1 и метеор добавить ecwyne: полимерные элементы

@ecwyne Спасибо за ваш вклад в пакет - работает как charme: -)

Ответ 7

В Meteor все папки/файлы внутри каталога /public требуют импорта следующим образом:

<link import="/bower_components..> и то же самое для ваших пользовательских элементов

<link import="/elements/my-elements.html>

Примечание:

Не нужно устанавливать Полимер с bower.

попробуйте следующее:

$ meteor add ecwyne:polymer-elements

Ответ 8

Внимание!

Для полимера v0.5.5 используйте пакет foreced @ecwyne, обновленный до последнего выпуска полимера:

meteor add boxxa:polymer-elements

Ответ 9

Я столкнулся с подобными проблемами при работе с полимерными элементами. Решение - это плагин сборки, который вулканизирует все файлы, перечисленные в файле импорта.

Оформить заказ https://github.com/meteorwebcomponents/compiler. Он делает именно это. С этим пакетом вам не нужно писать полимерный код в общей папке, а затем импортировать в шаблон пламени. С помощью mwc:compiler вы можете использовать полимер в качестве слоя представления по умолчанию вместо пламени. Все, что вам нужно сделать, это создать файл конфигурации с именем compiler.mwc.json.

Мы создали пакет рендеринга макета, который можно использовать точно так же, как функция Blaze.render. https://github.com/meteorwebcomponents/layout

Также доступен доступ к данным для использования метеоритных данных из полимерных компонентов https://github.com/meteorwebcomponents/mixin

Вот демонстрационное приложение с flowrouter https://github.com/meteorwebcomponents/demo-flowrouter

Вот приложение, которое использует все вышеперечисленные пакеты https://github.com/HedCET/TorrentAlert