Google Polymer with rails 4

时间:2014-11-12 09:57:24

标签: ruby-on-rails polymer

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

在轨道上使用带红宝石的聚合物是否有效? 如果有的话,还请提出比聚合物更好的选择吗?

5 个答案:

答案 0 :(得分:10)

我正在使用凉亭,所以我希望你的系统已经有了凉亭设置。 (brew install node&& npm install bower)

  1. 设置你的宝石

    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导入标记

    = 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
    
  12. 参考 http://angular-rails.com/bootstrap.html http://www.akitaonrails.com/2014/06/29/usando-polymer-com-rails#.VHcoW2SsV81

答案 1 :(得分:2)

深入搜索Google。我发现了主持人&#39;是最好用铁路聚合物。 以下是选项: -

nevir /聚合物导轨

alchapone /聚合物导轨

ahuth /主持人

同时检查 - http://joshhuckabee.com/getting-started-polymer-ruby-rails

答案 2 :(得分:0)

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

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

为了回答您更普遍的问题,我现在已经与Polymer和Rails / Sinatra合作了一段时间,它是构建应用程序前端而不依赖于erb / haml或其他服务器端模板。

答案 3 :(得分:0)

答案 4 :(得分:0)

我首先尝试使用bower-railsemcee的网络组件。

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

此外,主持人不再处于活动状态,迫使您使用较旧版本的链轮。

事实证明polymer-rails具有与emcee相同的功能。

这是我当前的设置

的Gemfile

gem 'polymer-rails'

安装并初始化

bundle install
rails g polymer:install

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

<html>
  <head>
    ...
    <%= 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
...

现在确保链轮加载资产

配置/初始化/ assets.rb

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

以下是如何使用组件

的示例
<paper-card heading="Paper Card Example" image="<%= image_path 'example.jpg' %>">
  <div class="card-content">This is an example of cards with polymer</div>
  <div class="card-actions">
    <paper-button raised>OK</paper-button>
  </div>
</paper-card>

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