Google Polymer with rails 4

前端 未结 5 924
长情又很酷
长情又很酷 2021-02-04 20:52

I have build a Ruby on rails app.I want to use polymer with my ruby on rails app. Cam anybody suggest some good resources to learn polymer with rails ?

Is it efficient t

相关标签:
5条回答
  • 2021-02-04 20:55

    You can use polymer-rails and polymer-elements-rails.

    https://github.com/alchapone/polymer-elements-rails

    https://github.com/alchapone/polymer-rails

    0 讨论(0)
  • 2021-02-04 21:02

    I've built a bower package for dealing with rails forms with polymer. It my come in handy, especially if you're going with to be building any kind of ajax forms or using nested attributes.

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

    To answer your more general question though, I've been working with Polymer and both Rails / Sinatra for a while now and it's a great tool for building out the front end of your application without relying heavily on erb / haml or other server-side templating.

    0 讨论(0)
  • 2021-02-04 21:05

    I am using bower, so I expect you already have bower setup on your system. (brew install node && npm install bower)

    1. Set up you gems

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

    3. rails g bower_rails:initialize

    4. rails g emcee:install

    5. Setup your bower file. Below is what mine looks like:

      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'
      

      Figure out the ones you need and delete the rest.

    6. rake bower:install
      To download the components but take note that the files will be saved in vendor/assets/bower_components and not vendor/assets/components expected by emcee. So you will need to make symbolic link.

    7. Setup symbolic links

      • first remove components i.e. rm -rf vendor/assets/components
      • then set up the symlink i.e. ln -s vendor/assets/bower_components vendor/assets/components
    8. Now setup your assets

      # 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
      

      (Please note that I only included all I am using for testing. As stated before, remove those you don't need).

    9. Just some house cleaning you jump off to start trying things out. Include Bower components in rake assets path.

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

      And that is about it for setup. Jump on it and start using it.

    10. Include html import tag in your layout file

      = html_import_tag "application", "data-turbolinks-track" => true
      
    11. And call a sample polymer in your view

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

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

    0 讨论(0)
  • 2021-02-04 21:08

    I was first trying to use web components with bower-rails and emcee.

    But I noticed that bower-rails isn't necessary, you just need to configure .bowerrc and bower.json then run bower install.

    Also, emcee is no longer active which forces you to use an older version of sprockets.

    It turns out polymer-rails has the same functionality as emcee.

    Here is my current setup

    Gemfile

    gem 'polymer-rails'
    

    install and initialize

    bundle install
    rails g polymer:install
    

    app/views/layouts/application.html.erb

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

    Download the bower.json file from elements.polymer-project.org and put it in the root of your app then run the command

    bower install
    

    Now your components should be in vendor/assets/components. Find all the .html files to include in the manifest. Some of the .html files are not the same name as the directory so it is a little tedious.

    app/assets/components/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
    ...
    

    Now make sure sprockets loads the assets

    config/initializers/assets.rb

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

    Here is an example of how to use a component

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

    You can use polymer-elements-rails which has a lot of the components already and you can skip the bower.json, bower install, and load assets steps. The only problem is I had a hard time finding out what the require paths were and some of the components were missing (like google-apis). Hope this helps anyone trying to use polymer with rails!

    0 讨论(0)
  • 2021-02-04 21:17

    On deep searching on Google. I have found that 'emcee' is the best to use polymer with rails. following are the options :-

    nevir/polymer-rails

    alchapone/polymer-rails

    ahuth/emcee

    also check- http://joshhuckabee.com/getting-started-polymer-ruby-rails

    0 讨论(0)
提交回复
热议问题