Google Polymer with rails 4

前端未结

关注

 5  917

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)
发布评论:

提交评论
- 加载中...
Happy的楠姐

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)
发布评论:

提交评论
- 加载中...