如何在Rails（4）中使用Polymer（1.0）？

Question

如何在Rails（4）中使用Polymer（1.0）？

ruby-on-railsruby-on-rails-4polymerweb-component

18

如今 Polymer（1.0）已经“生产就绪”，在 Rails（4）中使用它的最佳方式是什么？

我阅读了很多资料，发现所有解决方案都已过时（例如使用像polymer-rails、emcee等宝石），让我感到困惑的是如何为项目创建良好的结构以及包含所有的 Polymer 组件，而且我不知道 Sprocket 是否有所帮助。

- eveevans

4个回答

0

你可能会发现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。

- chad_

哦，我不知道rails-assets。那似乎是一个非常酷的想法。 - Ajedi32

它的表现相当不错，但显然你无法获得像生成器之类的Rails特定功能。不过，大多数东西都可以使用自定义助手进行包装，这样以后就可以轻松处理了。 - chad_

我认为这对于JS资产可以奏效，但是HTML模板（Web组件）不行。 - eveevans

0

几个月前，我曾尝试使用聚合物，希望这可以帮助您了解一些想法。

在GemFile中：

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存储库

- Rokibul Hasan

问题在于 gem 'polymer-core-rails' 和 gem 'polymer-paper-rails' 还没有准备好支持 Polymer 1.0，它们只能与 0.5 版本一起使用。 - eveevans

我使用了这些宝石 gem polymer-rails (~> 0.1.9)，我试图给你一个想法。 - Rokibul Hasan

我理解，但是随同这些宝石一起提供的核心元素和纸张元素已经被弃用了。 - eveevans

0

polymer-elements-rails gem是为了解决这些组件之间存在循环依赖的问题而创建的，因此没有将它们分离到不同的gem中的必要和可能性。因此，强烈建议使用此gem来替换已废弃的polymer-paper-rails、polymer-iron-rails等，它们将永远不会为Polymer 1.0更新。

- Alex Ch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adaline Simonian · Accepted Answer

更新 (2015年6月16日): polymer-rails有了一个官方包。请查看polymer-elements-rails，这是新的、官方的repository，其中包括了iron-，paper-和neon-elements。

我将继续保留这些fork，以便那些仍然将它们设置为依赖项的人，但使用官方仓库可以获得相同的功能和长期支持，因此如果你还没有切换，请务必切换。

polymer-rails项目已经更新到1.0版本，但组件的gems尚未更新。我已经创建了适当的forks，以便在此期间有一些可用的选项。

https://github.com/vsimonian/polymer-ne

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"
}