javascript - Rails 4.2 jQuery 仅在刷新后加载

Question

我有一个带有饼图的页面，使用 Chart.js 从数据库获取一些数据并将其可视化。用户输入两个日期(从/到)，然后按更新图表按钮，部分内容就会动态加载到页面中。不幸的是，图表仅在刷新后才起作用。

我知道有关 Turbolinks 和 jquery 的交易，但我似乎没有去任何地方。网站中的其他 jQueries 也会发生同样的情况，如果我返回，则需要刷新才能加载 js 代码。

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require moment
//= require bootstrap-sprockets
//= require Chart
//= require libs/bootstrap-lifestyle
//= require bootstrap-datepicker
//= require_tree .
//= require turbolinks

_visualise_chart.html.erb

<script>
  // Load jQuery data 

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

  var ready = function () {

  //
  // Setup Tickets per day of week chart
  //
  var data = [
    {
        value: $('#MyPieChart').data('removed'),
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Removed"
    },
    {
        value: $('#MyPieChart').data('installed'),
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Installed"
    },
    {
        value: $('#MyPieChart').data('updated'),
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Updated"
    }
  ]

  if ($('#MyPieChart')) {
       myNewChart = new Chart($("#MyPieChart").get(0).getContext("2d")).Pie(data, {
          //Number - Amount of animation steps
          animationSteps : 200,
          responsive : true,
          maintainAspectRatio: true
       });
    }

};

</script>

<div class="panel panel-default" style="width: max-width:360px; float:right;">
  <div class="panel-body">
    <div class="label distleft" style="background-color: #FDB45C">
      Updated:
    </div> 
    <%= @logevents_updated %> 
    <div class="label distleft" style="background-color: #46BFBD">
      Installed:
    </div>  
    <%= @logevents_installed %> 
    <div class="label distleft" style="background-color: #F7464A">
      Removed:
    </div> 
    <%= @logevents_removed %> 
  </div>
</div>

<%= content_tag :canvas, nil,  id: "MyPieChart", width: 300, height: 300,
      data: { 
          installed: @logevents_installed,
          updated: @logevents_updated,
          removed: @logevents_removed 
          } %>

可视化.js.erb

$('#piechart').html('<%= escape_javascript(render("visualise_chart")) %>');

可视化.html.erb

<h1>Visualize data</h1>
<hr />

<div class="col-lg-12">
  <div style="max-width: 600px" class="center-block">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="piechart">
          <%= render "visualise_chart" %>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="col-lg-12">
  <div style="max-width: 600px" class="center-block">
    <div class="panel panel-default">
      <div class="panel-heading">
        Please select from and to dates <br/>
      </div>
      <div class="panel-body">
        <%= form_tag visualise_path, class: 'form-inline',remote: true, :method => 'get', multipart: true do %>
          <div class="form-group">
            <%= text_field_tag :from_date, nil, class: 'datepicker form-control', type: 'text', placeholder: "From date"%>
          </div>
          <div class="form-group">
            <%= text_field_tag :to_date, nil, class: 'datepicker form-control', placeholder: "To date"%>
          </div>
        <%= submit_tag "Update chart", class: 'btn btn-default' %>
        <% end %>
      </div>
    </div>
  </div>
</div>

可视化.js

// Load jQuery data 
$(document).ready(ready);
$(document).on('page:load', ready);
$(document).on('page:change', ready);

var ready = function () {

  //
  // Setup Tickets per day of week chart
  //
  var data = [
    {
        value: $('#MyPieChart').data('removed'),
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Removed"
    },
    {
        value: $('#MyPieChart').data('installed'),
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Installed"
    },
    {
        value: $('#MyPieChart').data('updated'),
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Updated"
    }
  ]

  if ($('#MyPieChart')) {
       myNewChart = new Chart($("#MyPieChart").get(0).getContext("2d")).Pie(data);
  }

};

有什么想法吗？

Answer 1

使用内联 JavaScript 是一种不好的做法，因为你混合了行为和内容。 在 Turbolinks 中使用内联 javascript 简直是愚蠢的 - Turbolinks 本质上将您的应用程序变成了一个持久的单页应用程序，您会遇到各种奇怪的计时问题，因为在 Turbolinks 将新页面附加到 DOM 之前您的脚本可能不会运行。到那时，page:change 事件可能已经被触发。

这就是为什么它只在您刷新页面时运行，而不是在 Turbolinks 加载页面时运行。

问题不在于 Turbolinks，而在于你自己。穿上大男孩裤子并将 JavaScript 移至外部文件中。

已添加；

创建小部件(例如需要外部数据的图形)基本上有两种方法。这是一个通用的草图，与您的问题以及您正在使用的任何图形框架没有任何关系。

数据属性:

function Graph(data, el){}

if ($("#graph").length) {
  
  var data = $('#bar>li').map(function(i,el){ 
    return $(el).data() }
  ).toArray();
  $("#test").text( JSON.stringify(data) );

  Graph(data, $("#graph"));
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="bar">
  <li data-x="1" data-y="2">A</li>
  <li data-x="2" data-y="3">B</li>
  <li data-x="3" data-y="4">C</li>
</ul>

<pre id="test"></pre>

Ajax :

if ($("#graph").length) {
  var promise = $.getJSON('/foo.json');
  promise.then(function(data){
    return $.map(data, function(item){
      return {x: item.foo y: item.bar };
    });
  });

  promise.done(function(data){
    Graph($("#graph"), data);
  });
}