如何将 Polymer (1.0) 与 Rails (4) 一起使用？

Posted 2023-02-19

【中文标题】如何将 Polymer (1.0) 与 Rails (4) 一起使用？

【英文标题】：How to use Polymer (1.0) with Rails (4)?

【发布时间】：2015-08-19 13:40:48

【问题描述】：

既然 Polymer (1.0) 已“准备好生产”，那么在 Rails (4) 上使用它的最佳方式是什么？

我读了很多书，发现所有解决方案都已弃用，（例如使用 Gems，如：likepolymer-rails、emcee 等）

我在试图为项目创建一个好的结构以及包含所有聚合物组件的方法时迷失了方向，我也不知道 Sprocket 是否可以提供帮助。

【参考方案1】：

更新 （2015 年 6 月 16 日）：polymer-rails 的官方软件包已发布。请参阅polymer-elements-rails，这是一个新的官方存储库，其中包括iron-、paper- 和neon-elements。

我将暂时为那些可能仍然将它们设置为依赖项的任何人保留这些分支，但是您将通过使用官方存储库获得相同的功能和长期支持，所以 我敦促您如果没有，请切换。

---

polymer-rails 项目已更新到 1.0，但不幸的是，组件的 gem 还没有。我已经着手创建了适当的分叉，以便在此期间有一些工作选项。

https://github.com/vsimonian/polymer-iron-rails https://github.com/vsimonian/polymer-paper-rails https://github.com/vsimonian/polymer-neon-rails

你的 gemfile 应该有：

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 应该设置了第 3 方组件目录：

  "directory": "vendor/assets/components"

【讨论】：

谢谢@vartan，这是最接近的答案。但是，你会保留这些宝石吗？

@eveevans，请查看我的更新答案 - 看起来官方存储库几天前刚刚完成并在线发布！ :)

谢谢！这解决了所有问题 :) 现在，为项目做出贡献

嘿！只是为了澄清......我还需要为我想要包含的每个组件运行 rails g polymer:component 吗？如此处所述：github.com/alchapone/polymer-rails? @VartanSimonian

似乎不再维护polymer-elements-rails。这让我们一无所有。

【参考方案2】：

几个月前我曾尝试过聚合物，希望这可以帮助您获得一个想法

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

使用 polymar 渲染示例视图

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

您可以使用 ploymer 查看我的项目，这不是一个很好的编码，但您仍然可以从这个提交中得到一个想法 Github Repository

【讨论】：

问题在于 gem 'polymer-core-rails' 和 gem 'polymer-paper-rails' 还没有为 Polymer 1.0 做好准备，它们适用于 0.5

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

我了解，但不推荐使用宝石附带的核心元素和纸质元素。

【参考方案3】：

您可能会发现Rails Assets 是将其添加到您的应用程序的好方法。

Rails Assets 是Bower 的代理，用于从现有的前端 Javascript 库生成 gem，并通过 bundler/你的 Gemfile 代表你安装它们。这打破了您对 gem 打包程序的依赖，以使前端 Javascript 库保持最新。

基本上你会把它添加到你的 Gemfile 中：

source 'https://rails-assets.org' do
  gem 'rails-assets-polymer'
end

然后运行bundle install（确保bundler 是1.8.4 或更高版本，否则将无法使用上述sn-p）

最后，在 application.js 的适当位置添加//= require polymer。

【讨论】：

呵呵，我不知道 rails-assets。这似乎是一个很酷的主意。

它工作得很好，但显然你没有像生成器这样的特定于 Rails 的功能。用自定义助手包装大部分内容相对简单，这样您以后就可以轻松自如。

我认为这适用于 JS 资产，但不适用于 HTML 模板（Web 组件）

【参考方案4】：

polymer-elements-rails gem 的创建是因为没有意义/不可能将它们分成不同的 gem，因为所有这些组件都具有循环依赖关系。因此，几乎不建议切换到此 gem 而不是使用已弃用的 polymer-paper-rails、polymer-iron-rails 等。它们将永远不会为 Polymer 1.0 更新。