ruby on rails pass Rails: variable d'instance de contrôleur d'accès dans un fichier d'actif CoffeeScript ou JavaScript




js.erb rails (5)

Dans le contrôleur:

@foo_attr = { "data-foo-1" => 1, "data-foo-2" => 2 }

Dans la vue (HAML):

#foo{@foo_attr}

Dans l'actif CoffeeScript:

$("#foo").data("foo-1")
$("#foo").data("foo-2")

Dans Rails 3.1, il n'est pas possible d'accéder aux variables d'instance de contrôleur dans un fichier d'actif js.erb ou coffee.erb à l'aide d'une syntaxe telle que <% = @foo%>, où @foo est défini dans le contrôleur. La question est donc de savoir quels sont les meilleurs moyens de passer des variables de contrôleur à des ressources CoffeeScript ou JavaScript.

Cette question a en quelque sorte été posée sous de multiples formes compliquées sur le forum, mais la question que je souhaite poser à nouveau est d’avoir un lieu où toutes les recommandations sont rassemblées et où le code fourni est simple et lisible. Notez également que je fais spécifiquement référence aux actifs et non aux fichiers de réponses.


Answer #1

Plutôt que d’utiliser un champ caché, j’ai choisi d’ajouter un attribut de données au conteneur div que jquery peut prendre.

<div class="searchResults" data-query="<%= @q %>"></div>

puis le jquery pour y accéder

url: "/search/get_results?search[q]=" + $(".searchResults").data("query") + "&page=" + p

Je pense que c'est le moyen le plus propre de transmettre des données à javascript. Après n’avoir trouvé aucun moyen de transmettre une variable à un fichier de script Coffee avec le pipeline d’actifs Asset à partir d’un contrôleur. C'est la méthode que j'utilise maintenant. Je ne peux pas attendre que quelqu'un configure le chemin du contrôleur avec des rails qui seront les meilleurs.


Answer #2

Dans les cas où vos données javascript deviennent incontrôlables, l’utilisation de gon gem reste le moyen privilégié de passer par les rails, même en 2015. Après avoir configuré gon, vous pouvez transmettre des données à vos fichiers javascript en affectant simplement l'objet gon dans des rails.

(Gemfile)
gem 'gon'

(controller) 
def index 
  gon.products = Product.all 

(layouts) 
<%= include_gon %> 

(public/javascripts/your_js_can_be_here.js) 
alert(gon.products[0]['id'); 

(html source automatically produced) 
<script> 
  window.gon = {}; 
  gon.products = [{"created_at":"2015", "updated_at":"2015, "id":1, "etc":"etc"}];

Vous pouvez lire des informations plus détaillées sur l’implémentation de Gon ou des deux autres chaînes rail-javascript du screencast de Ryan Bate.
http://railscasts.com/episodes/324-passing-data-to-javascript


Answer #3

deux manières que j'ai faites dans le passé

mettre les données dans des champs cachés, accéder aux données en js / café

# single value
<%= hidden_field_tag "foo_name", @foo.name, { :id => "foo-name" } %>
$('#foo-name').val();

# when the 'value' has multiple attributes
<%= hidden_field_tag "foo", @foo.id, { :id => "foo", "data-first-name" => @foo.first_name, "data-last-name" => @foo.last_name } %>
$foo = $('#foo')
console.log $foo.val()
console.log $foo.data("firstName")
console.log $foo.data("lastName")

une autre option: charger des données dans la structure de données js dans erb, y accéder depuis js / coffee

<% content_for(:head) do %>
    <script>
    window.App = window.App || {};
    window.App.Data = window.App.Data || {};
    window.App.Data.fooList = [
        <% @list.each do |foo| %>
            <%= foo.to_json %>,
        <% end %>
    ];
    </script>
<% end %>


# coffee
for foo in window.App.Data.fooList
    console.log "#{foo.id}, #{foo.first_name} #{foo.last_name}"

Je ne suis pas un grand fan de la construction de données javascript à partir de ruby ​​dans erb comme ça, quelque chose à ce sujet ne se sent pas bien - cela peut être efficace

et une autre option: faire un appel ajax et obtenir les données à la demande du serveur

Je suis également intéressé par d'autres idées et approches


Answer #4

Il y a une très belle distribution ferroviaire et assez récente (févr. 2012) sur ce sujet spécifique: # 324 Passing Data to JavaScript

Il présente 3 méthodes: une balise de script, un attribut de données et le gomme. Je pense que la maison a couvert toutes les techniques disponibles. Je ne mentionnerai que l'utilisation d'un appel AJAX est préférable si vous avez un grand volume de données, des données dynamiques ou une combinaison des deux.





instance-variables