Как заставить Turbolinks перестать вмешиваться в мой JS?

У меня есть кнопка, которую я нажимаю, которая выполняет некоторые JS. Но то, что происходит при первом загрузке страницы, работает, но как только я перехожу на другую страницу и нажимаю кнопку на этой новой странице, она не работает.Как заставить Turbolinks перестать вмешиваться в мой JS?

В документации Turbolinks это нормально - так что я должен внести изменения.

Это частично было покрыто этим RailsCast - http://railscasts.com/episodes/390-turbolinks?view=asciicast - но решение, которое дает Райан, находится в CoffeeScript, и я использую простой старый ванильный JS.

Это мой posts.js файл:

$(function(){ 

    var toggleSidebar = $("#togglesidebar"); 
    var primary = $("#primary"); 
    var secondary = $("#secondary"); 

    toggleSidebar.on("click", function(){ 

     if(primary.hasClass("col-sm-9")){ 
      primary.removeClass("col-sm-9"); 
      primary.addClass("col-sm-12"); 
      secondary.css('display', 'none'); 
     } 
     else { 
      primary.removeClass("col-sm-12"); 
      primary.addClass("col-sm-9"); 
      secondary.css('display', 'inline-block'); 
     } 
    }); 

}); 


$(document).on('page:load');

Per Railscasts, это то, что они предлагают:

ready = -> 
    $('.edit_task input[type=checkbox]').click -> 
    $(this).parent('form').submit() 

$(document).ready(ready) 
$(document).on('page:load', ready)

Когда я пытаюсь это в нижней части моего posts.js:

$(document).ready(); 
$(document).on('page:load', ready());

Я получаю эту ошибку:

Uncaught ReferenceError: ready is not defined

Мысли о том, как я могу это получить? Я уверен, что это просто, но у меня очень мало опыта JS и даже меньше с CoffeeScript.

источник

2014-08-29 marcamillion

Хм, может отключить turbolinks? :) –

@SergioTulentsev - в стороне от этого .... очевидно :) – marcamillion

Если вы используете JS, а не CoffeeScript, почему у вас есть ready = -> в вашем JS-файле?

Попробуйте это.

var ready; 
ready = function() { 
    $('.edit_task input[type=checkbox]').click(function() { 
    $(this).parent('form').submit(); 
    }); 
}; 

$(document).ready(ready); 
$(document).on('page:load', ready);

В вашем случае:

var ready;  
ready = function() { 

    var toggleSidebar = $("#togglesidebar"); 
    var primary = $("#primary"); 
    var secondary = $("#secondary"); 

    toggleSidebar.on("click", function(){ 

     if(primary.hasClass("col-sm-9")){ 
      primary.removeClass("col-sm-9"); 
      primary.addClass("col-sm-12"); 
      secondary.css('display', 'none'); 
     } 
     else { 
      primary.removeClass("col-sm-12"); 
      primary.addClass("col-sm-9"); 
      secondary.css('display', 'inline-block'); 
     } 
    }); 

}; 

$(document).ready(ready); 
$(document).on('page:load', ready);

источник

2014-08-29 11:20:10

Этот фрагмент был из Railscast. Это не мое. Мой находится под фрагментом 'post.js'. Длинный. – marcamillion

Я обновил ответ для вашего дела. Попробуй. –

Perfect. Работает. Благодаря! – marcamillion

Вы получили ответ на свой вопрос, позвольте мне объяснить:

Turbolinks

Когда приложение запускает Turbolinks, это по сути делает так, чтобы каждый Turbolinks с поддержкой связи вы следуете просто визуализировать <body> запрашиваемой страницы, оставляя <head> тегов нетронутыми

<head> В тегах, где ваши <script> тегов проживают, а это означает, что они не получают обновились, когда Turbolinks называются. Это может показаться не большим делом; это.

Проблема у вас есть, что JS только связывается с элементами при нагрузке, а это означает, что любые новые элементы, которые добавляются на страницу не будет связано с какими-либо событиями:

...

Это означает, что если вы хотите выполнять какие-либо действия с JS вашего приложения, вам необходимо учитывать тот факт, что тег <body> будет постоянно меняться.

Чтобы сделать это, вы можете использовать два метода:

Javascript Delegation

Turbolinks events

Первый способ заключается в delegate your events из «последовательного» элемента (обычно $(document)). Это работает, выделяя ваш JS элементу container, а затем позволяя ему «делегировать» это до нужного элемента. Лучшим примером этого является .on функция:

$(document).on("click", "a", function(){ 
    alert("Clicked"); 
});

Во-вторых, вы хотите посмотреть на Turbolinks event hooks - это то, что вы используете сейчас. Это переопределение многого стандартных функции JQuery (такие как $(document)), что позволяет вам вызывать функции, которые имеют следующие:

var your_function = function(){ 
    ... 
}; 
$(document).on("page:load ready", your_function);

источник

2014-08-29 12:36:25

Как заставить Turbolinks перестать вмешиваться в мой JS?

ответ

Смежные вопросы