我的自定义元素在 Rails 4.2 和 polymer-rails 中不起作用
my custom elements don't work in Rails 4.2 with polymer-rails
使用 polymer-rails gem 和 Rails 4.2 我能够使用预定义的聚合物元素,例如纸元素集和铁元素集。
然而,当我制作自己的元素时,它们不会被渲染。
例如我用这个命令创建了一个元素
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></testing>
标签放到不同的视图中
我试过在 /app/views/layouts/application.html.erb
中用 <%= html_import_tag 'application' %>
替换 <%= html_import_tag 'application', 'data-turbolinks-track' => true %>
我尝试将自定义组件放入 /vendor/assets/components/testing/
而不是 /app/assets/components/testing/
对于我尝试的每件事,我都重新启动了服务器。
我注意到控制台记录了一个错误
Failed to execute 'registerElement' on 'Document': Registration failed for type 'testing'. The type name is invalid.
所以我在谷歌上搜索了一下,发现网络组件规范奇怪地要求所有用户创建的元素在其名称中都有一个连字符!没有太多关于此的文档 - 这就像秘密知识。
在元素名称中加入连字符解决了我的问题。
使用 polymer-rails gem 和 Rails 4.2 我能够使用预定义的聚合物元素,例如纸元素集和铁元素集。
然而,当我制作自己的元素时,它们不会被渲染。
例如我用这个命令创建了一个元素
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></testing>
标签放到不同的视图中
我试过在 /app/views/layouts/application.html.erb
<%= html_import_tag 'application' %>
替换 <%= html_import_tag 'application', 'data-turbolinks-track' => true %>
我尝试将自定义组件放入 /vendor/assets/components/testing/
而不是 /app/assets/components/testing/
对于我尝试的每件事,我都重新启动了服务器。
我注意到控制台记录了一个错误
Failed to execute 'registerElement' on 'Document': Registration failed for type 'testing'. The type name is invalid.
所以我在谷歌上搜索了一下,发现网络组件规范奇怪地要求所有用户创建的元素在其名称中都有一个连字符!没有太多关于此的文档 - 这就像秘密知识。
在元素名称中加入连字符解决了我的问题。