Как передать переменные Ruby в функцию JavaScript в представлении Rails? - PullRequest
Новая
       5

Как передать переменные Ruby в функцию JavaScript в представлении Rails?

11 голосов
/ 17 марта 2010

Мне интересно, как лучше всего передавать переменные в функции JavaScript в представлении rails. Прямо сейчас я делаю что-то вроде: 

<% content_for :javascript do %> 
  <script type="text/javascript">
    Event.observe(window, 'load', function(){          
        js_function(<%= @ruby_array.to_json %>, <%= @ruby_var %>); )}
  </script>
<% end %>

Это правильный путь?

Ответы [ 6 ]

21 голосов

Несколько вариантов:

escape_javascript

Псевдоним: j.

Работает только со строками.

Выбрасывает символы, которые могут иметь особое значение в строках Javascript, подобно обратной косой черте, в формат, подходящий для размещения внутри строковых кавычек Javascript.

Поддерживает html_safe статус ввода, поэтому необходимо html_safe, иначе специальные HTML-символы, такие как <, будут экранированы в &lt;. 

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

to_json + html_safe

Как уже упоминал Вячеслав, иди голосуй за него.

Работает, потому что JSON является почти подмножеством буквенной нотации объекта Javascript .

Работает не только с хеш-объектами, но также со строками, массивами и целыми числами, которые преобразованы в JSON-фрагменты соответствующего типа данных. 

<% data = { key1: 'val1', key2: 'val2' } %>
<%= javascript_tag do %>
  var data = <%= data.to_json.html_safe %>
  data.key1 === 'val1'
  data.key2 === 'val2'
<% end %>

атрибуты данных

Добавление значений к атрибутам, получение их с помощью операций DOM Javascript.

Лучше с помощником content_tag: 

<%= content_tag 'div', '', id: 'data', data: {key1: 'val1', key2: 'val2'} %>
<%= javascript_tag do %>
  $('#data').data('key1') === 'val1'
  $('#data').data('key2') === 'val2'
<% end %>

Иногда его называют "ненавязчивый Javascript".

гон

Специализированная библиотека для работы: https://github.com/gazay/gon

Пожалуй, самое надежное решение.

Gemfile: 

gem 'gon'

Контроллер: 

gon.key1 = 'val1'
gon.key2 = 'val2'

Макет app/views/layouts/application.html.erb: 

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

Вид: 

<%= javascript_tag do %>
  gon.key1 === 'val1'
  gon.key2 === 'val2'
<% end %>

См. Также

6 голосов
/ 26 сентября 2012 
- 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
2 голосов
/ 17 марта 2010

Есть техника, которая называется "ненавязчивый JavaScript". Вот Railscast об этом: текст ссылки . Он работает как с прототипом JQuery. Есть также плагины, которые могут помочь упростить некоторые задачи, описанные в статье.

0 голосов
/ 20 февраля 2019

Обратите внимание, что если вы не используете escape_javascript в представлении, вы можете включить его в свой код ruby ​​, например, так: 

require 'action_view/helpers/javascript_helper'
include ActionView::Helpers::JavaScriptHelper
# escape_javascript is available here.

или, если это не сработает, скопируйте источник функции в свой код, если необходимо: 

  JS_ESCAPE_MAP = {
    '\\'    => '\\\\',
    "</"    => '<\/',
    "\r\n"  => '\n',
    "\n"    => '\n',
    "\r"    => '\n',
    '"'     => '\\"',
    "'"     => "\\'"
  }

  JS_ESCAPE_MAP["\342\200\250".dup.force_encoding(Encoding::UTF_8).encode!] = "&#x2028;"
  JS_ESCAPE_MAP["\342\200\251".dup.force_encoding(Encoding::UTF_8).encode!] = "&#x2029;"

  # Escapes carriage returns and single and double quotes for JavaScript segments.
  #
  # Also available through the alias j(). This is particularly helpful in JavaScript
  # responses, like:
  #
  #   $('some_element').replaceWith('<%= j render 'some/element_template' %>');
  def escape_javascript(javascript)
    if javascript
      result = javascript.gsub(/(\\|<\/|\r\n|\342\200\250|\342\200\251|[\n\r"'])/u) { |match| JS_ESCAPE_MAP[match] }
      javascript.html_safe? ? result.html_safe : result
    else
      ""
    end
  end
0 голосов
/ 09 октября 2015

В HAML данные могут быть представлены так: 

.position{data: {latitude: @claim.latitude.to_json, longitude: @claim.longitude.to_json}}

:javascript
   var latitude = $('.position').data('latitude');
   var longitude = $('.position').data('longitude');
0 голосов
/ 16 сентября 2013

Я обнаружил, что gem переменная клиента , это поможет вам сделать это легко.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...