Descrições de joias

bower-rails : suporte Bower para projetos Rails. O arquivo de dependência é bower.json no diretório raiz do Rails ou Bowerfile se você usar DSL. Confira o changelog para as últimas mudanças e lançamentos.
emcee : Emcee é uma extensão do Rails Asset Pipeline. Ele permite que você importe e empacote componentes da web exatamente como faria com Javascript ou CSS.

Configurando joias

Adicione ‘bower-rails’ e ’emcee’ em seu Gemfile e agrupe-os.
# Gem Bower para a gema de Web Components
‘bower-rails’, ‘> = 0.7.3’
# Gema de Emcee para a gema de Web Components
’emcee’, ‘> = 1.0.4’
Em seguida, precisamos inicializar ambas as gemas, execute
rails g bower_rails : initialize
rails g emcee: install
Ok, está tudo configurado! É muito fácil.

Configurando Polímero

Basta adicionar Polymer e todos os WebComponents que você gostaria de usar em seu Bowerfile
# Polymer Lib e Polyfill, Core-elements e Paper-elements
ativo ‘polímero’, github: ‘Polímero / polímero’
ativo ‘polímero-núcleo-elementos’, github: ‘Polímero / elementos principais’
ativo ‘polímero-elementos de papel’, github: ‘Polímero / elementos de papel’

# Voice Synthesis and Recognition
asset 'voice-elements'

Execute bower install
rake bower: install
Não consegui descobrir como configurar o bower-rails para instalar no diretório de componentes em vez de componentes do bower de forma que o emcee pudesse pegar os componentes diretamente; no entanto, existe uma alternativa ainda melhor! Crie links simbólicos de todos os seus diretórios de fornecedores / ativos nos mesmos componentes do bower , onde o bower instala todos os ativos.
Alvo:
vendor / assets / bower_components
Links:
vendor / assets / components (emcee)
vendor / assets / javascripts
vendor / assets / stylesheets
Inclua o suporte HTML necessário em seu layout
Prepend inside head
<meta name = “viewport” content = “width = device-width, minimum-scale = 1.0, initial-scale = 1.0, user-scalable = yes”>
Adicione estes atributos ao seu corpo
não resolvido touch-action = “auto”
Incluir platform.js em sua diretiva javascripts (Ex. app / assets / javascripts / application.js)
// = requer plataforma / plataforma

Como usar WebComponents

Inclua os elementos que deseja em seu arquivo de diretiva de componente (por exemplo, app / assets / components / application.html)
<! –
* = require paper-input / paper-input
* = require voice-elements / dist / voice-player
– ->
Inclua a diretiva de componentes em seu layout com o ajudante de tag de importação html
<% = html import tag “application”%>
É isso, você pode adicionar as tags ‘paper-input’ e ‘voice-player’ em suas visualizações! Se você precisar de mais componentes, basta adicioná-los ao Bowerfile e ao application.html.