【问题标题】:Polymer Elements in a Meteor AppMeteor 应用程序中的聚合物元素
【发布时间】:2016-03-06 01:49:18
【问题描述】:

有没有人成功地将 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 方式”在很大程度上依赖于模板——只要有一点耐心,Meteor 和 Angular(以及其他)都会看起来更像 Polymer。
  • 同意@dalgard,Meteor 的 Blaze UI 有一些令人兴奋的功能即将推出,这将使其可用作强大的组件系统。 Meteor 做了很多棘手的事情来使其反应式 HTML 模板工作,所以我不确定何时/是否可以像这样/可能与 Polymer 兼容。我怀疑你最好的选择是完全绕过 Meteor 的模板引擎并自己连接它,无论 Polymer 支持它的任何方式。但是请注意:您是使用 Meteorite 还是尝试使用香草 Meteor 安装软件包?阅读:atmosphere.meteor.com/wtf/app
  • @dalgard,我想我正在尝试更多 Meteor,并希望我可以重复使用一些 Polymer 元素。
  • @Cuberto,感谢您的回复。我会看一下 Blaze,但我觉得我可以将 Meteor 用于一个更简单的项目,我不会将两种新兴技术结合起来。我使用 Meteorite 安装它,如 Readme 中所述。
  • @jamstoks Blaze 只是 Meteor 的全新官方模板系统。它只是对模板引擎的重写,与当前系统相比提供了几个好处。它目前是 WIP,但将在 Meteor 1.0 中包含在 Meteor 核心中。你可以在这里阅读:github.com/meteor/meteor/wiki/New-Template-Engine-Preview

标签: javascript meteor polymer


【解决方案1】:

我创建了一个包来将 Polymer 功能添加到 Meteor。

这里是github。

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

更新: 也可以使用meteor add ecwyne:polymer-elements添加

【讨论】:

  • 这适用于 Meteor 0.9.0.1 吗?我按照这些步骤操作,但我收到“未捕获的 HierarchyRequestError:无法在 'Node' 上执行 'appendChild':'HTML' 类型的节点可能不会插入到 '#document' 类型的节点中。”在浏览器中。
  • @babbata 软件包已经更新,现在可以与新的流星包装系统一起使用!
  • @ECWyne: 很抱歉在这里标记你.. 请检查这个问题stackoverflow.com/q/28877940/1560616
【解决方案2】:

如果您在 Meteor 中添加和使用 Polymer 时仍有问题,这里有一个可行的方法。

我们将使用 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

享受聚合物

致谢:Nic Raboy: Using Polymer With Apache Cordova

【讨论】:

  • 在这种情况下如何获得凉亭?通过 NPM(“默认”方式),还是作为流星包?此外,在开始时包含 NPM/bower 步骤或参考链接也是一个好主意,这样即使是完全的初学者也可以学习。
  • 这对我不起作用。我收到一堆错误,大多是相同问题的重复实例: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
【解决方案3】:

很遗憾听到您在让 Meteor 和 Polymer 一起玩得很好时遇到了麻烦。上面的 cmets 解释了 Meteor 的模板系统的情况,但如果它有用的话:

在 Polymer 团队中,我们创建了一个名为 Vulcanize 的工具,它可以将 Polymer 元素所需的所有样式、脚本和依赖项扁平化(连接)到一个文件中。这消除了对任何 XHR/Ajax 调用的需要,除非元素在某处调用远程服务器。

这是使用 Vulcanize 工具的guide,它可能对上述问题有所帮助。

【讨论】:

  • 谢谢,@addyo。这听起来很有希望,但我已经为此工作了一段时间,并且开始认为这不值得付出努力。使用您的技术,我会遇到如下错误:bower_components/polymer-selection/index.html:1: Can't set DOCTYPE here. (Meteor sets &lt;!DOCTYPE html&gt; for you) 我想我要么在 Meteor 中重写我的元素,要么尝试与 Angular 结合以进行外部数据绑定。
  • 为什么要和angular结合? blaze 已经处理数据绑定。
  • 我正在考虑将 Polymer 添加到 _src 目录,因为 Meteor 没有“解析”它
  • 我们创建了一个流星构建插件来处理 npm vulcanize 工具的包装。看看github.com/Differential/meteor-vulcanize
  • Checkout github.com/meteorwebcomponents/compiler 使用聚合物作为视图层而不是 blaze。这是一个简单的演示,带有流路由器github.com/meteorwebcomponents/demo-flowrouter
【解决方案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

meteor-polymer 包已过时

【讨论】:

    【解决方案5】:

    虽然有一个聚合物陨石包 (https://atmospherejs.com/package/polymer),看起来很有希望。

    如果您想自己添加 javascript 文件,您可能想尝试将它们放在:

    client/compatibility/
    

    如果不这样做,您将无法访问聚合物的全局变量,因为在正常的 javascript 中,全局变量只是在任何函数之外创建为 var myGlobal; 的变量。

    我很好奇meteor 将如何解析模板的聚合物句柄式语法。

    `

    【讨论】:

      【解决方案6】:

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

      终于搞定了 -> 试试:

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

      然后,留下 "my-element" 标签,只使用 webcomponents。 例如:

      <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 添加 ecwyne:polymer-elements

      @ecwyne 感谢您对软件包的贡献 - 像魅力一样工作 :-)

      【讨论】:

        【解决方案7】:

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

        &lt;link import="/bower_components..&gt; 和您的自定义元素相同

        &lt;link import="/elements/my-elements.html&gt;

        注意:

        无需使用bower 安装 Polymer。

        试试这个:

        $ meteor add ecwyne:polymer-elements

        【讨论】:

          【解决方案8】:

          重要

          对于聚合物 v0.5.5,使用更新到最新聚合物版本的分叉 @ecwyne 包:

          meteor add boxxa:polymer-elements
          

          【讨论】:

            【解决方案9】:

            在使用聚合物元素时,我也遇到过类似的问题。一个解决方案是一个构建插件,它可以硫化导入文件中列出的所有文件。

            结帐https://github.com/meteorwebcomponents/compiler 。它正是这样做的。使用这个包,您不必在公共文件夹中编写聚合物代码,然后导入到 blaze 模板。使用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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2015-01-04
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多