Google Polymer with rails 4

我已经构建了一个Ruby on rails app。我想在rails应用程序上使用我的ruby聚合物。 Cam有人建议用铁轨学习聚合物的一些好资源吗?

在轨道上使用带有ruby的聚合物是否有效? 如果有的话,还请建议其他比聚合物更好的选择?

我正在使用凉亭,所以我希望你已经在你的系统上安装了凉亭。 (brew安装节点&& npm安装凉亭)

  1. 设置你的gem

    gem 'bower-rails' gem 'emcee' 
  2. bundle install

  3. rails g bower_rails:initialize

  4. rails g emcee:install

  5. 设置您的凉亭文件。 以下是我的样子:

     asset 'angular' asset 'angular-route' asset 'angular-resource' asset 'angular-mocks' asset 'webcomponentsjs' asset 'polymer', github: 'Polymer/polymer' asset 'polymer-core-elements', github: 'Polymer/core-elements' asset 'polymer-paper-elements', github: 'Polymer/paper-elements' asset 'platform' # Voice Synthesis and Recognition asset 'voice-elements' 

    弄清楚你需要的那些并删除其余的。

  6. rake bower:install
    要下载组件,请注意文件将保存在vendor / assets / bower_components中,而不是emcee期望的供应商/资产/组件。 所以你需要建立符号链接。

  7. 设置符号链接

    • 首先删除组件,即rm -rf vendor/assets/components
    • 然后设置符号链接,即ln -s vendor/assets/bower_components vendor/assets/components
  8. 现在设置您的资产

     # app/assets/components/application.html *= require polymer/polymer # app/assets/javascripts/application.js //= require angular/angular //= require angular-route/angular-route //= require angular-resource/angular-resource //= require webcomponentsjs/webcomponents //= require platform/platform 

    (请注意,我只包括我用于测试的所有内容。如前所述,删除您不需要的内容)。

  9. 只是一些房子清洁你跳下来开始尝试。 在rake资产路径中包含Bower组件。

     # config/application.rb config.assets.paths << Rails.root.join("vendor","assets","bower_components") 

    这就是它的设置。 跳上它并开始使用它。

  10. 在布局文件中包含html import标记

     = html_import_tag "application", "data-turbolinks-track" => true 
  11. 并在您的视图中调用样品聚合物

     # sample.html.haml ================ %paper-tabs{:selected => "0", :scrollable => ""} %paper-tab Skills %paper-tab Experiences %paper-tab Education 

参考http://angular-rails.com/bootstrap.html http://www.akitaonrails.com/2014/06/29/usando-polymer-com-rails#.VHcoW2SsV81

深入搜索Google。 我发现’emcee’是使用带导轨的聚合物的最佳选择。 以下是选项: –

nevir /聚合物 – 轨道

alchapone /聚合物 – 轨道

ahuth /司仪

还请查看http://joshhuckabee.com/getting-started-polymer-ruby-rails

我已经建立了一个凉亭包,用于处理带聚合物的轨道forms。 它派上用场了,特别是如果你要构建任何类型的ajax表单或使用嵌套属性。

https://github.com/hobberwickey/polymer-rails-forms

为了回答你更普遍的问题,我已经和Polymer和Rails / Sinatra一起工作了一段时间,它是一个很好的工具,可以构建你的应用程序的前端而不必严重依赖erb / haml或其他服务器端模板。

我第一次尝试使用带有bower-rails和emcee的 Web组件。

但是我注意到bower-rails不是必需的,你只需要配置.bowerrc和bower.json然后运行bower install。

此外,emcee不再处于活动状态,这会强制您使用旧版本的链轮。

事实certificate, 聚合物导轨具有与主持人相同的function。

这是我目前的设置

的Gemfile

 gem 'polymer-rails' 

安装并初始化

 bundle install rails g polymer:install 

应用程序/视图/布局/ application.html.erb

   ... <%= html_import_tag 'application'%> ... 

从elements.polymer-project.org下载bower.json文件并将其放在应用程序的根目录中然后运行命令

 bower install 

现在,您的组件应位于供应商/资产/组件中。 找到要包含在清单中的所有.html文件。 某些.html文件与目录名称不同,因此有点单调乏味。

应用程序/资产/组件/ application.html.erb

 //= require polymer/polymer //= require paper-scroll-header-panel/paper-scroll-header-panel //= require paper-toolbar/paper-toolbar //= require paper-tabs/paper-tabs //= require paper-drawer-panel/paper-drawer-panel //= require paper-icon-button/paper-icon-button //= require iron-icons/iron-icons //= require paper-card/paper-card //= require paper-button/paper-button ... 

现在确保sprockets加载资产

配置/初始化/ assets.rb

 Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'components', '*') 

以下是如何使用组件的示例

  
This is an example of cards with polymer
OK

您可以使用已经包含许多组件的polymer-elements-rails,您可以跳过bower.json,bower安装和加载资产步骤。 唯一的问题是我很难找到需求路径是什么,并且缺少一些组件(如google-apis)。 希望这有助于任何人尝试使用聚合物与铁轨!