在Meteor应用中使用Polymer元素

17

有人成功将Polymer元素添加到Meteor项目中吗?我正在努力使其工作。

我尝试使用bower在public目录下安装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>

这导致了 platform.js 和 my-element.html 之间的无休止的 XHR 请求循环。

我也尝试了 meteor-polymer 包,但它不包含 polymer.html,而且我无法使其识别该包:

=> Errors prevented startup:

While building the application:
error: no such package: 'polymer'
我希望有人能够让Polymer与Meteor配合使用,因为我真的很想在这个应用程序中使用我的组件。

我希望有人能够让Polymer与Meteor配合使用,因为我真的很想在这个应用程序中使用我的组件。


2
你正在尝试使用Polymer真是太棒了。然而,在我个人看来,“Meteor方式”非常依赖于模板 - 只要耐心一点,Meteor和Angular(以及其他框架)都会变得更像Polymer。 - dalgard
同意@dalgard的观点,Meteor的Blaze UI有一些令人兴奋的功能即将推出,将使其可用作强大的组件系统。Meteor为使其反应式HTML模板工作而做了很多棘手的事情,因此我不确定是否可以像这样与Polymer兼容。我会怀疑,您最好的选择是完全绕过Meteor的模板引擎,并以Polymer支持的任何方式进行连接。然而需要注意的是:您是使用Meteorite还是尝试使用原始的Meteor安装程序?请参阅:https://atmosphere.meteor.com/wtf/app - sbking
@dalgard,我想更多地尝试Meteor,并希望能够重用一些Polymer元素。 - jamstooks
@jamstooks Blaze只是Meteor的新官方模板系统。它只是重写了模板引擎,提供了比当前系统更多的优势。目前它还在进行中,但将在Meteor 1.0中包含在Meteor核心中。您可以在此处阅读有关它的信息:https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview - sbking
@jamstooks 出于好奇,my-element.html 中是否导入了 polymer.html? - robdodson
显示剩余3条评论
9个回答

15

我已经创建了一个包,可以将Polymer功能添加到Meteor中。

这是Github地址。

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

更新: 还可以使用meteor add ecwyne:polymer-elements进行添加。


这个能在Meteor 0.9.0.1上运行吗?我按照步骤操作了,但是浏览器中出现了“Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'.”的错误提示。 - babbata
@babbata 这个包已经更新,现在可以与新的 Meteor 包装系统一起使用了! - ECWyne
@ECWyne:抱歉在这里@你。请查看这个问题http://stackoverflow.com/q/28877940/1560616。 - Ramesh Murugesan

10

如果您在将Polymer添加到Meteor中仍然遇到问题,这里有一种可行的方法。

我们将使用Bower将Polymer添加到Meteor项目中。

创建Meteor应用程序后,请转到应用程序目录并按照以下步骤操作:

  1. $ 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'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>

现在让我们来运行我们的应用程序...

  1. $ meteor

享受Polymer的乐趣

致谢:Nic Raboy:使用Polymer与Apache Cordova


在这种情况下如何获取Bower?通过NPM(“默认”方式)还是作为Meteor包?另外,最好在开头包括NPM / bower步骤或参考链接,以便即使是完全初学者也能跟随教程。 - CosmicGiant
这对我没用。我得到了一堆错误,大多数是相同问题的重复实例:Uncaught TypeError: Cannot read property 'helpers' of undefined @ myproject.js:5 --- Uncaught TypeError: prototype.registerCallback is not a function @ polymer-micro.html:73(多次)--- Uncaught TypeError: Polymer.mixin is not a function @ polymer-mixins.js:7 --- Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid. @ polymer-micro.html:64 - CosmicGiant

4
抱歉听到您在将Meteor和Polymer组合使用时遇到了问题。上面的评论解释了Meteor的模板系统的情况,但如果有用的话:
在Polymer团队中,我们创建了一个名为Vulcanize的工具,它可以将Polymer元素所需的所有样式、脚本和依赖项压缩成一个单独的文件。这消除了除调用远程服务器外任何XHR/Ajax调用的需要。
这里有一个指南,介绍如何使用Vulcanize工具,可能能够帮助解决上述问题。

1
谢谢,@addyo。听起来很有前途,但我已经在这上面工作了一段时间,开始觉得这不值得努力。使用您的技术,我遇到了错误,例如:bower_components/polymer-selection/index.html:1: Can't set DOCTYPE here. (Meteor sets <!DOCTYPE html> for you) 我正在考虑要么重写我的元素以适应Meteor,要么尝试与Angular结合进行外部数据绑定。 - jamstooks
为什么你想要与Angular结合?Blaze已经处理了数据绑定。 - dcsan
我在考虑将Polymer添加到_src目录中,因为Meteor不会对其进行“解析”。 - Viktor Matushevskyi
我们已经创建了一个Meteor构建插件来处理包装npm vulcanize工具。请查看https://github.com/Differential/meteor-vulcanize - Greg Neiheisel
请查看 https://github.com/meteorwebcomponents/compiler,它使用 Polymer 作为视图层而不是 Blaze。这里有一个简单的演示,使用 Flow Router https://github.com/meteorwebcomponents/demo-flowrouter - tkay

0

@jamstooks 我有和你一样的文件夹结构,也遇到了同样的问题。

最终解决了 -> 尝试:

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

然后,将"my-element"标签删除,直接使用Web组件。 例如:

<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.1meteor add ecwyne:polymer-elements

@ecwyne 感谢您的软件包贡献 - 工作得很好 :-)


0

虽然 Polymer 有一个看起来很有前途的陨石包(https://atmospherejs.com/package/polymer)。

如果您想自己添加 JavaScript 文件,可以尝试将它们放在以下位置:

client/compatibility/

如果不这样做,您将无法访问Polymer的全局变量,因为在普通JavaScript中,全局变量只是在任何函数外部创建的var myGlobal;变量。

我对Meteor如何解决Polymers类似于Handlebars的模板语法很好奇。

`


0

我也玩过这两个。虽然不太好看,但我可以让它们一起工作。

<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

meteor-polymer插件已经过期。


0
在Meteor中,/public目录内的所有文件/文件夹都需要像这样导入:

<link import="/bower_components..>对于您自定义的元素也是如此

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

注意:

无需使用bower安装Polymer。

请尝试这个命令:

$ meteor add ecwyne:polymer-elements


0

在使用聚合元素时,我也遇到了类似的问题。解决方案是使用一个构建插件,将导入文件中列出的所有文件进行聚合。

请查看 https://github.com/meteorwebcomponents/compiler 。它正是这样做的。使用此软件包,您无需在公共文件夹中编写聚合代码,然后导入到火山熔岩模板中。使用 mwc:compiler,您可以将聚合作为默认视图层,而不是火焰。您只需要创建一个名为 compiler.mwc.json 的配置文件即可。

我们已经构建了一个布局渲染包,可以像 Blaze.render 函数一样使用。https://github.com/meteorwebcomponents/layout

还提供了一个数据混合器,用于从聚合组件中响应地使用 Meteor 数据 https://github.com/meteorwebcomponents/mixin

这里有一个带有 flowrouter 的演示应用程序 https://github.com/meteorwebcomponents/demo-flowrouter

这里有一个应用程序,它使用了上述所有的软件包https://github.com/HedCET/TorrentAlert


0

重要

对于 Polymer v0.5.5,请使用更新到最新 Polymer 版本的 forked @ecwyne 包:

meteor add boxxa:polymer-elements

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接