安装凉亭和导轨

Question

我正在尝试在 Rails 4 应用程序中设置 Bower，特别是我正在尝试安装 voice-elements Web 组件：http://zenorocha.github.io/voice-elements/

我考虑过使用凉亭导轨，但希望尽可能保持原样，但我有点迷茫。到目前为止，我已遵循以下步骤：

在 Rails 根目录中创建 .bowerrc

{
  "directory": "vendor/assets/bower_components"
}

添加到 application.rb

config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

从 Rails 根目录

bower init

来自供应商/资产

bower install --save voice-elements

rails 显示视图中的示例代码

<voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice-player>
<script>
var form = document.querySelector('#mi-form'),
    element = document.querySelector('#mi-elemento');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    element.speak();
});
</script>

我不知道从这里去哪里。如何告诉 Rails 如何使用 vendor/assets 中的语音元素库？

Answer 1

作为替代方案：您会考虑使用rails-assets.org 吗？无需安装 bower，您只需将 bower 包安装为常规 gem。

在您的情况下，您可以在 Gemfile 的顶部添加以下行：

source 'https://rubygems.org'
source 'https://rails-assets.org'

然后为你的包添加一行，gems 是调用rails-assets-<package-name>，所以在你的情况下是

gem 'rails-assets-voice-elements'

Answer 2

有相当不错的gem 可以用来将Bower 与Rails 集成：bower-rails。试试这个方法。

Answer 3

您是否按照语音元素的“使用”说明进行操作？看起来您需要包含一些 Bower 创建的 javascript（您应该能够在 application.js 中要求它），然后在指向两个 HTML 文件的布局中添加一些 <link> 标记。

尝试将此添加到application.js：

//= require platform/platform

然后将这些行添加到布局中的<head> 部分：

<link rel="import" href="<%= asset_path 'voice-elements/dist/voice-player.html' %>">
<link rel="import" href="<%= asset_path 'voice-elements/dist/voice-recognition.html' %>">