2010-04-27 61 views
8

Estoy creando un sitio web en Ruby on Rails. Tengo una acción del controlador que hace que una vista de este modo:Ruby on Rails - Enviar la variable de JavaScript del controlador al archivo de activos Javascript externo

def show 
    time_left = Time.now.to_i - 3.hours.to_i 
    @character = current_user.characters.find(params[:id]) 
    respond_to do |format| 
    format.html # show.html.erb 
    format.xml { render :xml => @character } 
    end 
end 

Esto está muy bien, ya que hace que el show.html.erb como me gusta. Sin embargo, me gustaría pasar time_left a la vista como una variable de Javascript, ya que este valor se usa mediante un plugin JQuery de cuenta regresiva.

que podría poner un javascript bloque en la página en el código HTML e imprimir una variable de instancia a cabo de esta manera:

<script type="javascript"> $('#countdown').countdown('<%= @time_left =>')</script> 

pero me gustaría mantener todos mis JS en un archivo externo y fuera de la página podría ¿Alguien da algún consejo sobre cómo implementar esto?

+0

relacionadas: http://stackoverflow.com/questions/2464966/passing-ruby-variables-to-javascript-functio n-en-carriles-view –

Respuesta

7

Sí, puedes!

Reescriba su código JS en la función con un argumento (timelimit) y póngalo en algún archivo externo. Luego puede llamar a la función desde la vista y pasar esa variable @timeleft como argumento de la función JS.

ejemplo corto:

#controller 
@time_left = Time.now.to_i - 3.hours.to_i 

.

#javascript 
function count_down(time_left) { 
    $('#countdown').countdown(time_left) 
} 

.

#view 
<%=javascript_tag "count_down(#{@time_left})" -%> 

javascript_tag

Ejemplo no probado, es sólo idea no solución completa. No te olvides de cargar ese archivo JS. Puede utilizar otros JS rails helper javascript_include_tag. técnica

+0

Saludos MATE muy apreciada !! – RailsSon

+0

En realidad, hoy sugeriría usar el atributo de etiqueta meta para pasar variables a la página. Puede leer esos atributos a través de javascript fácilmente. – retro

4

de retro de utilizar un parámetro de la función es una posibilidad, pero hay que escapar adecuadamente la variable que está de paso, ya sea con escape_javascript o a_json + html_safe como se explica a continuación.

Sin embargo, como quiere afectar archivos externos, las mejores técnicas serán usar gon. Otra buena posibilidad es usar datos-atributos.

gon

Gem especializada para el trabajo: https://github.com/gazay/gon

Probablemente la solución más robusta.

Gemfile:

gem 'gon' 

controlador:

gon.timeleft = 1 

Disposición app/views/layouts/application.html.erb:

<html> 
<head> 
    <meta charset="utf-8"/> 
    <%= include_gon %> 
    <%= javascript_include_tag 'application' %> 

archivo de Activos:

gon.timeleft === 1 

datos-atributos

Agregue valores a los atributos, recupérelos con operaciones JavaScript DOM.

A veces llamado "Javascript discreto".

Ver cabeza:

<%= javascript_include_tag 'application' %> 

vista del cuerpo:

<%= content_tag 'div', '', id: 'data', data: {timeleft: '1'} %> 

archivo de Activos:

$(function() { 
    parseInt($('#data').data('key1')) === 1 
}) 

La siguiente ilustrar cómo escape_javascript y to_json trabajo para su uso en parte superior de la respuesta de retro.

escape_javascript

Alias: j.

Funciona únicamente en cadenas.

Escapa de caracteres que pueden tener un significado especial en cadenas de JavaScript, como escapes de barra invertida, en un formato adecuado para poner dentro de cadenas de JavaScript las comillas literales.

Mantiene html_safe estado de la entrada, por lo que necesita html_safe caracteres HTML especiales, como por lo demás < conseguirían escapado a &lt;.

<% a = "\\n<" %> 
<%= javascript_tag do %> 
    f('<%= j(a)   %>') // === '\\n&lt;' 
    f('<%= j(a).html_safe %>') // === '\\n<' 
<% end %> 

a_json + html_safe

funciona porque JSON es almost a subset of Javascript object literal notation.

Funciona no solo en objetos hash, sino también en cadenas, matrices y enteros que son convertidos a fragmentos JSON del tipo de datos correspondiente.

<% data = { key1: 'val1', key2: 'val2' } %> 
<%= javascript_tag do %> 
    var data = <%= data.to_json.html_safe %> 
    f(data.key1) \\ === 'val1' 
    f(data.key2) \\ === 'val2' 
<% end %> 
+0

Gracias - si no son duplicados, entonces merecen respuestas individuales – Flexo

Cuestiones relacionadas