Ruby on Rails - отправьте переменную JavaScript из контроллера во внешний файл ресурсов Javascript - PullRequest
Новая
       41

Ruby on Rails - отправьте переменную JavaScript из контроллера во внешний файл ресурсов Javascript

10 голосов
/ 27 апреля 2010

Я создаю сайт в Ruby on Rails. У меня есть действие контроллера, которое отображает вид так: 

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

Это нормально, так как он отображает show.html.erb, как мне нравится. Однако я хотел бы как-то передать time_left представлению как переменную Javascript, поскольку это значение используется плагином обратного отсчета JQuery.

Я мог бы поместить блок javascript на страницу в HTML и распечатать переменную экземпляра следующим образом: 

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

Но я бы хотел сохранить все мои JS во внешнем файле, и за пределами страницы кто-нибудь мог бы дать совет, как это реализовать?

Ответы [ 2 ]

7 голосов
/ 27 апреля 2010

Да, вы можете!

Переписать ваш JS-код в функцию с одним аргументом (ограничение по времени) и поместить его во внешний файл.Затем вы можете вызвать функцию из представления и передать эту переменную @timeleft в качестве аргумента функции JS.

Краткий пример: 

#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

Пример не проверен, это всего лишь идея, а не полное решение.Не забудьте загрузить этот файл JS.Вы можете использовать другие JS rails helper javascript_include_tag .

5 голосов

Метод ретро с использованием параметра функции возможен, но вы должны правильно экранировать передаваемую переменную с помощью escape_javascript или to_json + html_safe , как описано ниже.

Однако, так как вы хотите воздействовать на внешние файлы, лучшими методами будет использование gon . Еще одна хорошая возможность - использовать атрибуты данных .

гон

Камень, специализированный для работы: https://github.com/gazay/gon

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

Gemfile: 

gem 'gon'

Контроллер: 

gon.timeleft = 1

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

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

Файл актива: 

gon.timeleft === 1

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

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

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

Просмотр головы: 

<%= javascript_include_tag 'application' %>

Просмотр тела: 

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

Файл актива: 

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

Следующее иллюстрирует, как escape_javascript и to_json работают для вас поверх ответа ретро.

escape_javascript

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

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

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

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

<% a = "\\n<" %>
<%= javascript_tag do %>
  f('<%= j(a)           %>') // === '\\n&lt;'
  f('<%= 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 %>
  f(data.key1) \\ === 'val1'
  f(data.key2) \\ === 'val2'
<% end %>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...