Comment passer des variables Ruby à une fonction JavaScript en mode Rails?
je me demande Quelle est la meilleure pratique pour passer des variables à des fonctions JavaScript dans une vue rails. En ce moment je fais quelque chose comme:
<% content_for :javascript do %>
<script type="text/javascript">
Event.observe(window, 'load', function(){
js_function(<%= @ruby_array.to_json %>, <%= @ruby_var %>); )}
</script>
<% end %>
Est-ce la bonne façon d'aller à ce sujet?
5 réponses
quelques options:
escape_javascript
Alias:j.
fonctionne uniquement sur cordes.
échappe aux caractères qui peuvent avoir une signification particulière dans les chaînes Javascript, comme backslash s'échappe, dans un format approprié pour mettre à L'intérieur des guillemets littéraux de chaîne Javascript.
Maintient html_safe statut des entrées,
il faut donc html_safe autrement des caractères HTML spéciaux comme < obtiendrait s'est échappé dans <.
<% a = "\n<" %>
<%= javascript_tag do %>
'<%= j(a) %>' === '\n<'
'<%= j(a).html_safe %>' === '\n<'
<% end %>
to_json + html_safe
comme mentionné par Vyacheslav, aller upvote lui.
fonctionne parce que JSON est presqu'un sous-ensemble D'objet Javascript notation littérale.
fonctionne non seulement sur les objets de hachage, mais aussi sur les chaînes, les tableaux et les entiers qui sont converti en fragments JSON du type de données correspondant.
<% data = { key1: 'val1', key2: 'val2' } %>
<%= javascript_tag do %>
var data = <%= data.to_json.html_safe %>
data.key1 === 'val1'
data.key2 === 'val2'
<% end %>
données- les attributs
ajouter des valeurs aux attributs, les récupérer avec les opérations JavaScript DOM.
Mieux content_tag helper:
<%= content_tag 'div', '', id: 'data', data: {key1: 'val1', key2: 'val2'} %>
<%= javascript_tag do %>
$('#data').data('key1') === 'val1'
$('#data').data('key2') === 'val2'
<% end %>
Parfois appelé "Javascript discret".
gon
Bibliothèque spécialisée pour l'emploi: https://github.com/gazay/gon
Probablement le plus robuste solution.
Gemfile:
gem 'gon'
Contrôleur:
gon.key1 = 'val1'
gon.key2 = 'val2'
Mise en page app/views/layouts/application.html.erb:
<html>
<head>
<meta charset="utf-8"/>
<%= include_gon %>
Vue:
<%= javascript_tag do %>
gon.key1 === 'val1'
gon.key2 === 'val2'
<% end %>
Voir aussi
- content_for :javascripts_vars do
= "var costs_data = #{@records[:cost_mode][:data].to_json}".html_safe
= "var graph_data = #{@records[:cost_mode][:graph].to_json}".html_safe
il y a une technique appelée "javascript discret". Voici un Railscast à ce sujet: texte du lien . Il fonctionne à la fois avec un prototype jQuery. Il y a aussi des plugins qui peuvent vous aider à simplifier certaines tâches décrites dans l'article.
j'ai trouvé que le gem client variable, il vous aide à le faire facilement.
En HAML pouvez les données sont présentées de la sorte:
.position{data: {latitude: @claim.latitude.to_json, longitude: @claim.longitude.to_json}}
:javascript
var latitude = $('.position').data('latitude');
var longitude = $('.position').data('longitude');