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

Question

我正在尝试开始将 Polymer 与 Meteor 结合使用，但看到了以下我无法解释的行为。

复制 git 克隆 https://github.com/JeremyKells/meteor-polymer-testing.git 和运行流星。

这只是使用以下方法创建的应用程序：

meteor create testpoly

然后使用 bower 添加聚合物组件：

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 个元素重复时，单击任一按钮只会更新第二个 'counter'，第一个计数保持为零。

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

i.stack.imgur.com/bqumz.png

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

Answer 1

我在 windows 上用流星测试了该项目，它按预期工作！我从 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"
  }
}

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

Meteor and Polymer, what is causing this behaviour?

meteor

polymer-1.0

tl;博士

详情