Автозаполнение локальными данными в Rails

Question

В моем приложении пользователи выбирают вокзалы из текстового поля автозаполнения. Поскольку не так много железнодорожных станций (~ 100), я бы предпочел, чтобы поле автоматически заполнялось на основе содержимого клиентского массива, а не запрашивало сервер каждый раз, когда пользователь вводит символ (цель состоит в автозаполнение более отзывчиво).

Мой вопрос заключается в том, как сделать это в Rails понятным, не взломанным способом. Мое текущее решение - просто поставить эту строку внизу index.html.erb:

<%= javascript_tag "var stations = #{Station.all.map {|s| s.name}.to_json}" %>

но это не здорово (во-первых, я должен помнить имя переменной "станции", пока я работаю над application.js).

Answer 1

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

В основном, если у вас есть действие контроллера (например, действие станций контроллера javascripts). Это может выглядеть так.

# in controllers/javascripts_controller.rb
def stations
  @stations = Station.all
end

затем вы можете создать файл вида JavaScript, подобный этому ...

// in views/javascripts/stations.js.erb
var stations = <%= @stations.map(&:name).to_json %>;
// ...

Этот файл javascript может содержать любой javascript, который вы хотите, так что вы, вероятно, можете переместить туда часть кода application.js. Затем вы можете включить это, как и любой другой файл JavaScript.

<%= javascript_include_tag 'stations' %>

Это предполагает, что он находится под путем 'javascripts', который имеет место, если у вас есть контроллер javascripts. В противном случае вам придется пройти полный путь.

У этого есть обратная сторона, сделав еще один запрос к приложению Rails, но вы, вероятно, можете добавить кэширование страниц в это действие js для оптимизации этого.

Answer 2

В вашем application.js, когда документ готов, выполните ajax-вызов, чтобы заполнить локальный массив значениями.

document.observe("dom:loaded", function() {
  var stations;
  new Ajax.Request(url, {
    method: 'get',
    onSuccess: function(transport) {
      stations = transport.responseText;
    }
  });
});

Мой пример может не работать идеально (так как я использую jQuery до jrails сейчас), но он должен произвести правильное впечатление.