如何使用聚合物(1.0)与Rails (4)？

Question

既然聚合物(1.0)已经“准备好了”，那么在Rails (4)上使用它的最佳方法是什么呢？

我读了很多书，我发现所有的解决方案都是不推荐的(例如使用Gems，比如:类聚合物-rails，emcee等等)。

我迷失了试图为这个项目创造一个良好的结构，以及包括所有聚合物组件的方法，我也不知道链轮是否能帮上忙。

Answer 1

UPDATE (2015年6月16日)：为polymer-rails发布了官方软件包。请参阅polymer-elements-rails，这是一个新的正式存储库，包括iron-、paper-和neon-elements。

我将暂时保持这些分叉用于任何仍然将其设置为依赖项的人，但您将从使用官方存储库获得相同的功能和长时间的支持，因此，如果没有，我建议您切换。

聚合物导轨项目已经更新为1.0，但不幸的是，组件的gems还没有更新。我已经做了适当的叉子，以便在此期间有一些工作上的选择。

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

你的宝石档案应该有：

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

Answer 2

您可能会发现Rails资产是将其添加到应用程序中的一个很好的方法。

Rails资产是鲍尔的代理，用于从现有的前端Javascript库中生成gems，并通过bundler/您的Gemfile代表您安装它们。这就打破了你对创业板包保持前端Javascript库最新的依赖。

基本上，您可以将其添加到Gemfile中：

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

然后运行bundle install (确保邦德勒版本为1.8.4或更高版本，否则它将不能工作w/上述片段)

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

Answer 3

几个月前我试过用聚合物，希望这能帮助你得到一个想法。

在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储存库中获得一个想法。