如今 Polymer(1.0)已经“生产就绪”,在 Rails(4)中使用它的最佳方式是什么?
我阅读了很多资料,发现所有解决方案都已过时(例如使用像polymer-rails、emcee等宝石),让我感到困惑的是如何为项目创建良好的结构以及包含所有的 Polymer 组件,而且我不知道 Sprocket 是否有所帮助。
如今 Polymer(1.0)已经“生产就绪”,在 Rails(4)中使用它的最佳方式是什么?
我阅读了很多资料,发现所有解决方案都已过时(例如使用像polymer-rails、emcee等宝石),让我感到困惑的是如何为项目创建良好的结构以及包含所有的 Polymer 组件,而且我不知道 Sprocket 是否有所帮助。
polymer-rails
有了一个官方包。请查看polymer-elements-rails
,这是新的、官方的repository,其中包括了iron-
,paper-
和neon-elements
。gem 'polymer-rails'
gem 'polymer-iron-rails', :git => "git://github.com/vsimonian/polymer-iron-rails.git"
gem 'polymer-paper-rails', :git => "git://github.com/vsimonian/polymer-paper-rails.git"
gem 'polymer-neon-rails', :git => "git://github.com/vsimonian/polymer-neon-rails.git"
然后运行bundle
。
在app/assets/components/application.html.erb
中设置你的依赖:
//= require polymer/polymer
//= require iron-ajax/iron-ajax
//= require iron-input/iron-input
.....
app/assets/javascripts/application.js
应该包含:
//= require webcomponentsjs/webcomponents-lite
你的 .bowerrc
应该设置第三方组件目录:
{
"directory": "vendor/assets/components"
}
你可能会发现Rails Assets是一种不错的方法来将它添加到你的应用程序中。
Rails Assets 是一个代理 Bower,用于从现有的前端 JavaScript 库生成 gem,并通过 bundler/your Gemfile 代表您安装它们。这样可以打破你依赖 gem 打包者维护前端 JavaScript 库更新的问题。
基本上,你需要将这个添加到你的 Gemfile 中:
source 'https://rails-assets.org' do
gem 'rails-assets-polymer'
end
然后运行bundle install
(确保bundler的版本为1.8.4或更高版本,否则它将无法与上述片段一起使用)
最后,在application.js的适当位置添加//= require polymer
。
gem 'rails', '4.0.2'
gem 'polymer-rails'
gem 'polymer-core-rails'
gem 'polymer-paper-rails'
在 app/assets/components/application.html.erb 中
//= require polymer/polymer
在 app/assets/javascripts/application.js 中
//= require polymer/platform
你应该有以下内容的.bowerrc文件
{
"directory": "vendor/assets/components"
}
使用多态渲染的示例视图
<style>
google-map {
display: block;
height: 600px;
}
</style>
<h1>Polymer Rails Example</h1>
<google-map latitude="37.77493" longitude="-122.41942" fitToMarkers>
<google-map-marker latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!"></google-map-marker>
<google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>
<google-map disableDefaultUI showCenterMarker zoom="15"></google-map>
<script>
var map = document.querySelector('google-map');
map.latitude = 37.77493;
map.longitude = -122.41942;
map.addEventListener('google-map-ready', function(e) {
alert('Map loaded!');
});
</script>
你可以查看我的项目,使用的是Polymer,虽然代码不太好看,但你仍然可以从这个提交中获取一些想法 Github存储库
gem polymer-rails (~> 0.1.9)
,我试图给你一个想法。 - Rokibul Hasanpolymer-elements-rails
gem是为了解决这些组件之间存在循环依赖的问题而创建的,因此没有将它们分离到不同的gem中的必要和可能性。因此,强烈建议使用此gem来替换已废弃的polymer-paper-rails
、polymer-iron-rails
等,它们将永远不会为Polymer 1.0
更新。