ProgressBar.js работает только после обновления страницы

Question

Я пытаюсь использовать ProgressBar.js в моем приложении Rails, но я признаюсь, что не знаю много Javascript. У меня есть этот код в одном из моих взглядов:

<div class="circleprogress" id="circleprogress"></div> 

<script type="text/javascript"> 
window.onload = function onLoad() { 
    var circle = new ProgressBar.Circle('#circleprogress', { 
     color: '#38A6A6', 
     duration: 3000, 
     easing: 'easeInOut', 
     strokeWidth: 7, 
     trailColor: '#D5D5D5', 
     trailWidth: 1, 
     text: { 
      value: <%= (@percentage_of_goal * 100).round %> + '%' 
     }, 
    }); 

    circle.animate(<%= @percentage_of_goal%>); 
}; 
</script> 

И @percentage_of_goal уже определен в моем контроллере. Код работает нормально, но только после обновления страницы.

Я рассмотрел other questions, который, похоже, имеет ту же проблему, но решение заключается в установке драгоценного камня jquery-turbolinks, и я уже сделал это и потребовал его в своем приложении application.js, и он по-прежнему работает только после перезагрузить.

Как исправить это?

Answer 1

Я нашел решение отсюда: Rails 4: how to use $(document).ready() with turbo-links

Что я сделал это:

var ready; 
ready = function() { 
    var circle = new ProgressBar.Circle('#circleprogress', { 
     color: '#38A6A6', 
     duration: 3000, 
     easing: 'easeInOut', 
     strokeWidth: 7, 
     trailColor: '#D5D5D5', 
     trailWidth: 1, 
     text: { 
      value: <%= (@percentage_of_goal * 100).round %> + '%' 
     }, 
    }); 

    circle.animate(<%= @percentage_of_goal%>); 
}; 

$(document).ready(ready); 

Что по другому вопросу работает с turbolinks.

Answer 2

Часто случается, что виновником является турбовинты (или конфигурация ваших функций js). Если вы посмотрите на свой код, window.onload = function onLoad(), скорее всего, потребует перезагрузки страницы, если вы используете turbolinks.

Вместо этого, попробуйте следующее:

window.ready = function onLoad() 

Вот почему: Turbolinks работает путем загрузки макета один раз, а затем, как вы просматриваете на разных страницах, он обновляет конкретные элементы асинхронно. Поэтому .onload не работает, потому что ваша новая страница никогда не «загружается» в традиционном смысле этого слова, она просто обновляет старый контент через javascript. Это, конечно, делает ваш сайт очень быстрым, но вам просто нужно немного привыкнуть к тому, чтобы называть ваши javascript-функции (см. Выше).

Если выше не работает, посмотрим, что произойдет, если вы временно избавиться от turbolinks (помните, bundle install при этом), но Ставлю долларов, чтобы пончики это вопрос.

Относительно jQuery-turbolinks: Я бы посоветовал использовать этот камень по двум причинам (если у меня есть неправильные люди, поставьте меня прямо). Во-первых, хорошо избегать чрезмерного количества драгоценных камней в вашем приложении, и, скорее всего, вы действительно можете покрыть большинство преимуществ этого драгоценного камня, сделав вышеупомянутое изменение в своем javascript. Во-вторых, он не обновлялся через полтора года, поэтому ... да.

Один из последних советов о переговорах с турбонагнетателями иногда вам понадобится конкретная ссылка, чтобы просто сделать классическую неасинхронную нагрузку без использования турбовинтов (если вы, например, перепрыгиваете между макетами). В таком случае вы можете включить атрибут no_turbolink как так: <%= link_to "Home", home_path, data: {no_turbolink: true} %>