问题

Has anyone successfully added Polymer elements to a Meteor project? I'm struggling to make it work.

I've tried using bower to install the Polymer package under public:

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

I then included the element like this:

<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>

That's resulting in an endless loop of XHR requests for platform.js and my-element.html.

I've also tried the meteor-polymer package, that doesn't include polymer.html and I couldn't get it to recognize the package anyway:

=> Errors prevented startup:

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

I'm hoping someone has been able to get Polymer working with Meteor as I'd really like to use my components in this app.

回答1:

I have created a package to add Polymer functionality to Meteor.

Here is the github.

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

Update: It can also be added using meteor add ecwyne:polymer-elements

回答2:

In case you still have issues with adding and using Polymer in Meteor, here's an approach that will work.

We are going to add Polymer to the Meteor project using Bower.

After creating your Meteor app, navigate to your app's directory and follow the steps below:

$ bower init => This will take you through the steps you require to create your bower.json file through the terminal

Now lets add the Polymer components:

$ bower install --save Polymer/polymer
bower install --save Polymer/webcomponentsjs
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

Now we'll have a bower_components directory inside the app's root folder which contains the Polymer componets. Create another folder called public and move the bower_components into the public folder so that we have public/bower_components.

Here's a simple piece of code you can replace the contents of yourappname.html with.

<head>
<title>Athman's 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>

Now let's get our app running ...

$ meteor

Enjoy Polymer

Credits: Nic Raboy: Using Polymer With Apache Cordova

回答3:

Sorry to hear you've been having trouble getting Meteor and Polymer to play well together. The comments above explain the situation with Meteor's templating system, but in case it's useful:

Over on the Polymer team we created a tool called Vulcanize which can flatten (concatenate) all of the styles, scripts and dependencies needed for Polymer elements into a single file. This removes the need for any XHR/Ajax calls unless an element is calling out to a remote server somewhere.

Here's a guide to using the Vulcanize tool, which may be able to help with the above.

回答4:

I have aslo played with these both. Its not so pretty, but i get work them together.

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

in my public directory

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

the meteor-polymer package is out-date

回答5:

While there is a meteorite package for polymer (https://atmospherejs.com/package/polymer) which seems promising.

If you want to add javascript files yourself, you might want to try putting them under:

client/compatibility/

If you don't, you won't have access to polymer's global variables, since in normal javascript globals are just variables created as var myGlobal; outside of any function.

I am curios on how meteor is going to resolve polymers handlebars-like syntax for templates.

回答6:

@jamstooks I have same folder structure like you and had same trouble.

Got it working finally -> Try:

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

and then, leave the "my-element" tags out and just use the webcomponents. For example:

<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>

With Meteor 1.0.2.1 and meteor add ecwyne:polymer-elements

@ecwyne Thanks for your package contribution - works like a charme :-)

回答7:

In Meteor, all folder/files inside /public directory requires you to import like this:

<link import="/bower_components..> and the same for your custom elements

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

Note:

No need to install Polymer with bower.

instead, try this:

$ meteor add ecwyne:polymer-elements

回答8:

Important

For polymer v0.5.5 use forked @ecwyne package updated to the latest polymer release:

meteor add boxxa:polymer-elements

回答9:

I've faced similar issues when working with polymer elements. A solution is a build plugin which vulcanizes all files listed in an import file.

Checkout https://github.com/meteorwebcomponents/compiler . It does exactly this. With this package you don't have to write polymer code in the public folder and then to import to the blaze template. With mwc:compiler you can use polymer as the default view layer instead of blaze. All you need to do is create a config file named compiler.mwc.json.

We've built a layout render package which can be used just like Blaze.render function. https://github.com/meteorwebcomponents/layout

A data mixin to use meteor data reactively from polymer components is also available https://github.com/meteorwebcomponents/mixin

Here is a demo app with flowrouter https://github.com/meteorwebcomponents/demo-flowrouter

Here is an app which uses all of the above stated packages https://github.com/HedCET/TorrentAlert

来源：https://stackoverflow.com/questions/21767115/polymer-elements-in-a-meteor-app

标签

javascript

meteor

polymer

Polymer Elements in a Meteor App

问题