ruby on rails - ¿Cómo utilizar Polymer(1.0) con Rails(4)?

ruby-on-rails ruby-on-rails-4

Question

Ahora que Polymer (1.0) está "listo para producción", ¿cuál es la mejor manera de usarlo en Rails (4)?

Leí mucho y vi que todas las soluciones están en desuso, (por ejemplo, utilizando gemas como: rieles de polímeros como likepe, emcee, etc.)

Estoy perdido tratando de crear una buena estructura para el proyecto y la forma de incluir todos los componentes de polímero, además, no sé si Sprocket podría ayudar o no.

Answer 1

Es posible que Rails Assets sea ​​una buena manera de agregar esto a su aplicación.

Rails Assets es un proxy de Bower para generar gemas de bibliotecas de JavaScript front-end existentes e instalarlas en su nombre a través de Bundler / su Gemfile. Esto rompe su dependencia de los empaquetadores de gemas para mantener las bibliotecas de JavaScript front-end actualizadas.

Básicamente, añadirías esto a tu Gemfile:

source ''https://rails-assets.org'' do
  gem ''rails-assets-polymer''
end

Luego ejecute bundle install (asegúrese de que Bundler sea la versión 1.8.4 o superior o que no funcione con el fragmento de código mencionado anteriormente)

Finalmente, agregue //= require polymer en el lugar apropiado en application.js.

Answer 2

Hace unos meses probé con el polímero, espero que esto pueda ayudarte a tener una idea

En GemFile

gem ''rails'', ''4.0.2''
gem ''polymer-rails''
gem ''polymer-core-rails''
gem ''polymer-paper-rails''

En app / asset / components / application.html.erb

 //= require polymer/polymer

En app / asset / javascripts / application.js

//= require polymer/platform

Usted muestra tener archivos .bowerrc con el siguiente contenido

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

Vista de ejemplo renderizado con polimar.

     <style>
         google-map {
             display: block;
             height: 600px;
         }
     </style>

     <h1>Polymer Rails Example</h1>

     <google-map latitude="37.77493" longitude="-122.41942" fitToMarkers>
       <google-map-marker latitude="37.779" longitude="-122.3892"  draggable="true" title="Go Giants!"></google-map-marker>
       <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
     </google-map>

     <google-map disableDefaultUI showCenterMarker zoom="15"></google-map>
     <script>
         var map = document.querySelector(''google-map'');
         map.latitude = 37.77493;
         map.longitude = -122.41942;
         map.addEventListener(''google-map-ready'', function(e) {
             alert(''Map loaded!'');
         });
     </script>

Puedes echar un vistazo a mi proyecto usando ploymer, no es una buena codificación, pero puedes obtener una idea de este repositorio de Github.

Answer 3

polymer-elements-rails gema de polymer-elements-rails se creó porque no existe la posibilidad de separarlos en gemas diferentes, ya que todos estos componentes tienen dependencias circulares. Por lo tanto, casi no se recomienda cambiar a esta gema en lugar de usar polymer-paper-rails obsoletos, polymer-paper-rails polymer-iron-rails , etc. Nunca se actualizarán para Polymer 1.0 .

Answer 4

ACTUALIZACIÓN (16 de junio de 2015) : Se ha lanzado un paquete oficial para polymer-rails . Consulte polymer-elements-rails , que es el nuevo repositorio oficial que incluye elementos de iron- , paper- y neon-elements .

Mantendré estos tenedores actualizados por el momento para cualquier persona que aún los tenga configurados como una dependencia, pero obtendrá una funcionalidad idéntica y un soporte prolongado al usar el repositorio oficial, por lo que le insto a que cambie si no lo ha hecho. .

El proyecto de polymer-rails se ha actualizado a 1.0, pero desafortunadamente, las gemas para los componentes aún no se han actualizado. He seguido adelante y he creado las horquillas adecuadas para que haya alguna opción de trabajo mientras tanto.

• https://github.com/vsimonian/polymer-iron-rails
• https://github.com/vsimonian/polymer-paper-rails
• https://github.com/vsimonian/polymer-neon-rails

Su archivo gem debería tener:

gem ''polymer-rails''
gem ''polymer-iron-rails'', :git => "git://github.com/vsimonian/polymer-iron-rails.git"
gem ''polymer-paper-rails'', :git => "git://github.com/vsimonian/polymer-paper-rails.git"
gem ''polymer-neon-rails'', :git => "git://github.com/vsimonian/polymer-neon-rails.git"

A continuación, ejecute el bundle .

En app/assets/components/application.html.erb , establece sus dependencias:

//= require polymer/polymer
//= require iron-ajax/iron-ajax
//= require iron-input/iron-input
.....

app/assets/javascripts/application.js debe contener:

//= require webcomponentsjs/webcomponents-lite

Su .bowerrc debe tener configurado el directorio de componentes de terceros:

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