TL;博士

Question

我试图开始使用Polymer with Meteor，但已经看到了我无法解释的以下行为。

重现git clone https://github.com/JeremyKells/meteor-polymer-testing.git并运行meteor。

这只是使用以下内容创建的应用程序：

meteor create testpoly

然后用凉亭添加聚合物组分：

bower install --save Polymer/polymer
bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements

并将该部分添加到代码中。

这样运行正常，但如果删除这两行中的任何一行的注释：

<!-- <link rel="import" href="/bower_components/paper-dropdown/paper-dropdown.html"> -->
<!-- <link rel="import" href="/bower_components/paper-dialog/paper-action-dialog.html"> -->

该应用程序显示正常的流星计数器应用程序两次，如下所示： http://i.stack.imgur.com/KAv7Z.png

为什么会这样？我该如何阻止它？

继Guissouma的回复之后的更多信息。我在Ubuntu 15.04上运行它，主要用chrome测试。当UI元素重复时，单击任一按钮仅更新第二个计数器＆＃39;，第一个计数保持为零。

在同一环境中的Firefox上，只有一组UI元素，但按钮不起作用。

i.stack.imgur.com/bqumz.png

在连接到此服务器的iphone上尝试同时使用Safari和Chrome会提供与firefox相同的结果：它看起来不错，但按钮不会更新计数值。

Answer 1

我用windows上的meteor测试了这个项目，它按预期工作！我从headers.html删除评论该应用程序显示正常的流星计数器应用程序。

在使用firefox的ubuntu 15.0.4上，该按钮似乎无法正常工作，这是由于在headers.html文件中导入的js文件webcomponents.js。尝试在headers.html上对此行进行评论并再次测试。

<!-- <script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script> -->

Answer 2

从Polymer 0.5更改为Polymer 1.0时，这是导致导入链接错误的情况它应该是：

<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">

虽然我仍然感到困惑，为什么这会导致html标签被复制，以及为什么这不会在浏览器中引发错误，所以当我得到正确的代码时它都能正常工作！

Answer 3

TL;博士

确保您对Polymer和PaperElements的凉亭依赖关系是最新的。（即使用＃^ 1.0.0而不是＃1.0.0。）

详细

这个问题的根本原因有两个：

即使路径请求中没有资源，Meteor也会响应主页面的内容，但它does not use a 404 (Not Found) status code。
HTML导入将在页面unless the response is an error中包含引用的文档。

如果您正在使用Polymer，那就无所谓了。以下Meteor应用程序将显示重复行为：

<head>
  <link rel="import" href="bad-link.html">
</head>
<body>
  I'm Duplicated!<br>
</body>

解决方案是确保您的HTML导入有效。

就我而言，paper-icon-button.html导致paper-behaviors/paper-radio-button-behavior.html导入paper-behaviors的最新版本并不存在。

不一致的原因是因为paper-icon-button被锁定在版本#1.0.0，但其自己的bower依赖项被引用paper-behaviors#^1.0.0，这意味着the latest version >= 1.0.0 and < 2.0.0。

解决方案是更改我的bower依赖项版本以使用semver caret syntax。

{
  "dependecies": {
    "polymer": "Polymer/polymer#^1.2.0",
    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
  }
}

流星和聚合物，导致这种行为的原因是什么？

3 个答案:

TL;博士

详细