Question

我正在尝试在我的Rails应用程序中使用ProgressBar.js，但我承认我不太了解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 gem，我已经完成了这个并且在我的application.js中需要它，它仍然只能在重新加载后才能工作。

我该如何解决这个问题？

Answer 1

通常，turbolinks（或js函数的配置）是罪魁祸首。在查看代码时，window.onload = function onLoad()可能需要您重新加载页面，如果您正在使用turbolinks。

相反，试试这个：

window.ready = function onLoad()

这就是原因： Turbolinks通过加载布局一次，然后当您浏览到不同的页面时，它会异步更新特定元素。因此，.onload不起作用，因为您的新页面实际上从未真正“加载”传统意义上的单词，它只是通过javascript更新旧内容。这当然会让你的网站变得非常快，但你只需要习惯于稍微改变你的javascript函数（见上文）。

如果上述方法不起作用，请看看如果你暂时摆脱了turbolinks会发生什么事情（记得这样做时bundle install）但是我敢打赌你花钱给那些甜甜圈这个问题。

关于jquery-turbolinks：我建议不要使用这个宝石有两个原因（如果我弄错了人，请让我直截了当）。首先，最好避免在你的应用程序中使用过多的宝石，并且通过对javascript进行上述更改，你真的可以覆盖这个宝石的大部分优势。其次，它在一年半内没有更新......所以......是的。

关于协商turbolinks的最后一个提示有时你会想要一个特定的链接来做一个经典的非异步加载而不使用turbolinks（例如你在布局之间跳转）。在这种情况下，您可以包含no_turbolink属性，如下所示：<%= link_to "Home", home_path, data: {no_turbolink: true} %>

Answer 2

我从这里找到了解决方案： 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。

ProgressBar.js仅在页面刷新后才起作用

2 个答案: