Google Polymer with rails 4

问题

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 to use polymer with ruby on rails ? Please also suggest other better options than polymer, if any ?

回答1:

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

Set up you gems
```
gem 'bower-rails'
gem 'emcee'
```
bundle install
rails g bower_rails:initialize
rails g emcee:install

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.

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

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

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.

Include html import tag in your layout file

= html_import_tag "application", "data-turbolinks-track" => true

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

回答2:

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

回答3:

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.

回答4:

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

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

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

回答5:

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!

来源：https://stackoverflow.com/questions/26884022/google-polymer-with-rails-4

标签

ruby-on-rails

polymer