我的自定义元素在带有聚合物导轨的 Rails 4.2 中不起作用答案

【问题标题】：my custom elements don't work in Rails 4.2 with polymer-rails我的自定义元素在带有聚合物导轨的 Rails 4.2 中不起作用
【发布时间】：2016-09-19 04:59:41
【问题描述】：

在 Rails 4.2 中使用聚合物轨道 gem，我可以使用预定义的聚合物元素，例如纸元素集和铁元素集。

但是，当我制作自己的元素时，它们不会被渲染。

例如我用这个命令创建了一个元素

rails g polymer:component testing

我没有动过它

/app/assets/components/testing/testing.html 看起来像这样：

<dom-module id="testing">
  <link rel="stylesheet" href="testing.css" />
  <template>

    <h2>Testing</h2>
  </template>

  <script src="testing.js"></script>
</dom-module>

/app/assets/components/testing/testing.js 看起来像这样：

Polymer({
  is: "testing"
});

/app/assets/components/application.html.erb 有这个：

//= require polymer/polymer
//= require paper-styles/paper-styles
//= require iron-icons/iron-icons
//= require paper-tooltip/paper-tooltip
//= require easy-paper-tabs/easy-paper-tabs
//= require testing/testing

/app/views/layouts/application.html.erb 的<head> 是这样的：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title><%= full_title(yield(:title)) %></title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag %>
  <%= html_import_tag 'application', 'data-turbolinks-track' => true %>
</head>

当我将标签 <testing></testing> 放入视图时，我希望看到 h2 标题“正在测试”，但我没有。相反，那里没有渲染任何内容。当我检查页面时，我只看到空标签<testing></testing>。

我错过了什么？

我试过把<testing></testing>标签放到不同的视图中

我尝试在/app/views/layouts/application.html.erb 中将<%= html_import_tag 'application', 'data-turbolinks-track' => true %> 替换为<%= html_import_tag 'application' %>

我尝试将自定义组件放入 /vendor/assets/components/testing/ 而不是 /app/assets/components/testing/

对于我尝试的每一件事，我都重新启动了服务器。

【问题讨论】：

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

【解决方案1】：

我注意到控制台记录了一个错误提示

Failed to execute 'registerElement' on 'Document': Registration failed for type 'testing'. The type name is invalid.

所以我搜索了一下，发现 web-components 规范奇怪地要求所有用户创建的元素的名称中都有一个连字符！没有太多关于此的文档 - 这就像秘密知识。

在元素名称中加上连字符可以解决我的问题。

【讨论】：