2015-05-21 2 views
0

У меня есть приложение для рельсов, и я пытаюсь упорядочить свой javascript в конкретных javascript-файлах и загружать его только в том случае, если страница требует его. Я использую второй файл манифеста для загрузки javascript на странице для моей страницы «goal_designer».Rails, Javascript и Turbolinks - функция недоступна

Если я выполняю «Просмотр кода страницы» на моей странице goal_designer (после того, как я по ссылке т ней, а не перезагрузить его) Я подтверждаю, что файл JS был добавлен:

<script src="/assets/application.js?body=1" data-turbolinks-track="true"></script> 
<script src="/assets/files/goal_designer.js?body=1"></script> 
<script src="/assets/goal_designer_bundle.js?body=1"></script> 

Однако, если Я пытаюсь использовать функцию, которая находится внутри этого файла, она не работает. Если я перезагружаю страницу, она отлично работает, и функция доступна для использования.

В моих приложений/активов/файлов/goal_designer.js у меня есть:

$(document).on('page:change', function(){ 
    hello_there_1(); 
}); 

$(document).on('page:load', function(){ 
    hello_there_1(); 
}); 

function hello_there_1() { 
    alert("hello_there_1");  
} 

hello_there_1 только получает срабатывает, если я перезагрузить страницу, а не если я перейти к нему. Я понял, что цель_designer.js должна быть доступна, поскольку она была добавлена ​​на эту страницу, и функция hello_there_1() должна быть доступна, но это, похоже, не так. Итак, как только страница загружается, функция должна запускаться.

Другое дело - если я посмотрю список активов в отладчике Chrome (Источники), target_designer.js появляется только в списке, если я перезагружаю страницу, а не если я перехожу к ней (хотя она находится в папке ' источник страницы 'ok).

  1. Я в разработке, поэтому я думал, что все js будут предварительно загружены или доступны для ссылки. Это верно?
  2. Если я нажимаю на страницу, и js-страница, связанная с страницей, добавляется в голову, как я могу привязать addEventListener к объекту на странице из этого недавно загруженного файла?

FYI - другая информация - я думаю, что делаю это правильно. Я использую этот код в моем goal_designer.html.erb:

<% content_for :head do %> 
    <%= javascript_include_tag 'goal_designer_bundle' %> 
<% end %> 

И это в моем application.html.erb:

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> 
<%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
<%= yield :head %> 

в мое приложение/активы/JavaScripts У меня есть файл манифеста, goal_designer_bundle.js, который содержит:

//= require ./files/goal_designer 

ответ

0

Конструктивно Turbolinks не обновляет раздел <head>, только тело. Идея состоит в том, что ваши JS и CSS запрашиваются один раз при начальной загрузке страницы, а последующие запросы избегают этого, используя AJAX и просто заменяя тело. Таким образом, благодаря тому, что Turbolinks предназначен для работы, ваш блок content_for :head не будет работать.

Философский подход очень отличается от того, как работает Turbolinks, поэтому, если вы планируете его использовать, я бы просто отключил Turbolinks.

+0

Спасибо, Барт. Я читал так много блогов об этом, я явно смешиваю совет. Я бы предпочел использовать подход Turbolinks, так есть ли способ иметь специфичные для страницы js или это противоположная философия? Думаю, я могу перечислить все js-файлы в application.js для управления turbolinks, а затем использовать идентификатор контроллера в файле для активации кода на странице: change? – DeeBee