带导轨的 Google 聚合物 4答案

【问题标题】：Google Polymer with rails 4带导轨的 Google 聚合物 4
【发布时间】：2015-09-02 03:33:16
【问题描述】：

我已经构建了一个 Ruby on rails 应用程序。我想在我的 ruby on rails 应用程序中使用聚合物。凸轮有人建议一些好的资源来学习带有导轨的聚合物吗？

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

【问题讨论】：

标签： ruby-on-rails polymer

【解决方案1】：

我正在使用 bower，所以我希望您的系统上已经安装了 bower。 (brew install node && npm install bower)

设置你的宝石
```
gem 'bower-rails'
gem 'emcee'
```
bundle install
rails g bower_rails:initialize
rails g emcee:install

设置您的凉亭文件。下面是我的样子：

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'

找出你需要的并删除其余的。

rake bower:install
要下载组件，但请注意文件将保存在 vendor/assets/bower_components 中，而不是 emcee 期望的 vendor/assets/components 中。所以你需要做符号链接。
设置符号链接
- 首先删除组件，即rm -rf vendor/assets/components
- 然后设置符号链接，即ln -s vendor/assets/bower_components vendor/assets/components

现在设置您的资产

# 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

（请注意，我只包括了我用于测试的所有内容。如前所述，删除那些你不需要的）。

只需进行一些房屋清洁，您就可以开始尝试了。在 rake 资产路径中包含 Bower 组件。
```
# config/application.rb
config.assets.paths << Rails.root.join("vendor","assets","bower_components")
```
这就是设置。跳上它并开始使用它。

在布局文件中包含 html 导入标签

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

并在您的视野中调用样品聚合物

# 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

【讨论】：

emcee 不再处于开发阶段。还有其他选择吗？

【解决方案2】：

关于在 Google 上的深度搜索。我发现'emcee' 是最好使用带有导轨的聚合物。以下是选项：-

nevir/聚合物导轨

alchapone/聚合物导轨

ahuth/主持人

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

【讨论】：

可悲的是 nevir/polymer-rails 大部分都被遗弃了 - 我没有时间专注于它:(
根据我的经验，我认为 ahuth/emcee 是最好的。
任何机构都可以提供有关聚合物导轨的简短教程吗？

【解决方案3】：

我已经构建了一个 bower 包，用于处理带有聚合物的导轨形式。它可以派上用场，尤其是当您要构建任何类型的 ajax 表单或使用嵌套属性时。

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

不过，为了回答您更普遍的问题，我已经使用 Polymer 和 Rails / Sinatra 有一段时间了，它是构建应用程序前端的好工具，而无需严重依赖 erb / haml 或其他服务器端模板。

【讨论】：

【解决方案4】：

您可以使用聚合物轨道和聚合物元素轨道。

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

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

【讨论】：

【解决方案5】：

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

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

此外，emcee 不再处于活动状态，这会迫使您使用旧版本的 sprocket。

原来polymer-rails和emcee的功能一样。

这是我目前的设置

宝石文件

gem 'polymer-rails'

安装和初始化

bundle install
rails g polymer:install

app/views/layouts/application.html.erb

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

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

bower install

现在您的组件应该在 vendor/assets/components 中。查找要包含在清单中的所有 .html 文件。有些.html文件与目录名称不同，所以有点繁琐。

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

现在确保 sprockets 加载资产

config/initializers/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）。希望这可以帮助任何尝试将聚合物与导轨一起使用的人！

【讨论】：

不知何故聚合物自己的变量替换不起作用...我按照您的步骤操作，但我添加了一张纸卡，纸卡被绘制，但里面的 [[image]] 是'不替换为默认的空字符串，我不断收到 /assets/%5B%5Bimage%5D%5D 的 GET 请求，即 /assets/[[image]]...
@LeonardoLourenço 如果您使用 bower 安装未包含在 polymer-elements-rails gem 中的组件，我建议您按照我的步骤操作。我在答案中添加了一个纸卡示例。如果未定义图像，则不应请求 /assets/[[image]]。我测试了，没有这个问题。
我已经完成了您发布的相同步骤。即使添加 polymer-elements-rails gem 也不会改变任何东西...我不断收到对 /assets/[[image]] 的 GET 请求...我知道 Polymer 的变量替换不起作用，我只是不知道为什么. =/无论如何谢谢。我认为最好打开我自己的问题，详细说明所有内容。