Polymer 在 Firefox 中无法按预期工作答案

【问题标题】：Polymer not working as expected in FirefoxPolymer 在 Firefox 中无法按预期工作
【发布时间】：2014-10-13 19:36:46
【问题描述】：

我正在尝试使用 the polymer-rails 和 polymer-paper-rails Gems 将 Polymer 与 Rails 4 结合。

我似乎在让任何元素在 Firefox 中显示时遇到了很多问题。在环顾四周并在 Google 上进行了大量搜索后，我得出的结论是，这一定是我的 platfom.js 文件有问题。

我已按照说明安装上述两个 gem，但我真的不知道我做错了什么。纸张元素在 Google Chrome 中完美运行。

在我的 Firefox 开发控制台中，我看到了消息

"platform.js 不是页面上的第一个脚本。请参阅 http://www.polymer-project.org/docs/start/platform.html#setup 为详细信息。“platform.js:12”。

这就是我的 application.js 文件的样子：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
//= require elements/ripple
//= require forms/select

$(function(){ $(document).foundation(); });

我的 HTML 部分如下所示：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>

    <%= javascript_include_tag 'polymer/platform' %>

    <%= stylesheet_link_tag    "application" %>
    <%= html_import_tag 'application'%>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= csrf_meta_tags %>
</head>

【问题讨论】：

检查 Firefox 的开发控制台 - 你看到了什么错误？
你的结论很可能是正确的。导致事情在 Chrome 而不是其他浏览器中运行的最可能的问题是polymer.js 未包含在您的页面中。没有更多信息，尽管我们很难与您一起调试。您可以检查正在提供的 javascript，寻找平台吗？
@Nevir，我已经用代码和控制台消息更新了帖子。我认为你们正在做某事。我已经更改了 js 文件中 require 语句的顺序，但这似乎不起作用
您的布局（或页面模板）是什么样的？ platform.js 做了一些非常侵入性的事情来确保所有东西都被正确地填充。确保您没有在其前面包含任何其他脚本。
您可能想尝试在您的 head 顶部添加一个 <%= javascript_include_tag 'polymer/platform' %>，而不是将其放入您的 sprockets 包中（不理想，但至少可能有助于诊断）

标签： ruby-on-rails firefox polymer web-component

【解决方案1】：

platform.js 文档似乎已经过时（与 Polymer 的 0.5 版本有关）

为了在不完全支持 web 组件的浏览器上兼容，您应该包括

//= require webcomponentsjs/webcomponents-lite

之后，您应该在 FF/Safari 中看到组件，就像在 chrome 中看到的一样

【讨论】：