ruby-on-rails - 为什么我得到 “Uncaught SyntaxError: Unexpected token ILLEGAL”？

Question

有人可以帮我吗？
我试图将js代码从 View 移动到单独的js文件，但是却遇到了许多这样的错误: Uncaught SyntaxError :意外的 token 非法。为什么会这样呢？

我的高图表的JS代码:

var chart;
var monthCategories = #{Date::ABBR_MONTHNAMES[1..12].inspect};
var monthNames = #{Date::MONTHNAMES.to_json}
var currentView = '#{@current_view}';
var currentMonth = #{@current_month};
var CURRENT_YEAR = #{Date.current.year};
var currentYear = #{@current_year};
var currentIndex = #{@current_index};
var currentInterval = '#{@current_interval}';
var seriesColors = #{{ "Applicants" => status_color(20), "Inquiries" => status_color(10), 'Conversion Rate' => '#7FC315', 'RSVPs'=> '#937CB0'}.to_json}

var registrantsData = #{@registrants_data.to_json};
var applicantsData = #{@applicants_data.to_json};
var pendingData = #{@pending_data.to_json};
var toursData = #{@tours_data.to_json};
var conversionData = #{@conversion_data.to_json};
var toursRequestedCount = #{@tours_requested.count}

$(document).ready(function() {
  getDataForView = function() {
   if (currentView == 'Applicants') { return applicantsData; }
   if (currentView == 'Inquiries') { return registrantsData; }
   if (currentView == 'Conversion Rate') { return conversionData; }
   if (currentView == 'RSVPs') { return toursData; }
 }

getSeriesColor = function() {
  return seriesColors[currentView];
}

changeChartMonth = function(increase) {
  if (increase && currentIndex < 23) { currentIndex = currentIndex + 1 }
  if (!increase && currentIndex > 1) { currentIndex = currentIndex - 1 }
  switchChartSeries();
}

selectedYear = function() {
  year = currentIndex < 12 ? CURRENT_YEAR - 1 : CURRENT_YEAR;
  return year;
}

updateTextIndication = function() {
  var text = '';
  $('.nav-arrow').hide();
  if (currentInterval == 'days') {
    text = monthNames[currentIndex % 12 + 1] + ' ';
    if (currentIndex > 1) { $('.left-nav-arrow').show(); }
    if (currentIndex < 23) { $('.rigth-nav-arrow').show(); }
    $('.year').hide();
    year = selectedYear();
    text = text + year;
    $('strong.current_chart_date').text(text);
    $('span.current_chart_view').text(currentView + ' for:');
    $('strong.current_chart_date').show();
  } else {
    $('strong.current_chart_date').hide();
    $('.left-nav-arrow').hide();
    $('.rigth-nav-arrow').hide();
    $('.year').show();
  }
  $('.chart_interval a').removeClass('active');
  $('.chart_interval a.' + currentInterval).addClass('active');
}

setYear = function(year) {
  if (year == CURRENT_YEAR) {
    currentIndex = 12;
  } else {
    currentIndex = 11;
  }
  $('a.year').removeClass("active_year");
  $("a[year="+year+"]").addClass("active_year");
}

switchChartSeries = function() {
  var dataSource = getDataForView();
  var seriesType = 'column';
  var categories;

  data = dataSource[currentIndex];

  if (currentInterval == 'months') {
    categories = monthCategories;
    temp = [];
    for (var i=0; i<dataSource.length; i++) {
      if (dataSource[i].drilldown.year == selectedYear()) {
        temp.push(dataSource[i]);
      }
    }
    dataSource = temp;
  }
  if (currentInterval == 'days') {
    categories = data.drilldown.categories;
    dataSource = data.drilldown.data;
  }

  updateTextIndication();
  updateNavTabs();

  chart.xAxis[0].setCategories(categories);
  while(chart.series.length > 0)
    chart.series[0].remove(true);

  if (currentView == 'Conversion Rate') {
    seriesType = 'area';
    chart.yAxis[0].setExtremes(0, 100);
  } else {
    seriesType = 'column'
    var maxVal = 0
    if (currentInterval == 'days') {
      maxVal = Math.max.apply(Math, dataSource)
    } else {
      for (var i = 0; i < dataSource.length; i++) {
        if (dataSource[i].y > maxVal) {
          maxVal = dataSource[i].y
        }
      }
    }
    if (maxVal < 3) {
      chart.yAxis[0].setExtremes(0, 3)
    } else {
      chart.yAxis[0].setExtremes(0, null)
    }
  }

  chart.addSeries({
    name: currentView,
    type: seriesType,
    data: dataSource,
    color: getSeriesColor(),
    borderRadiusTopLeft: 3,
    borderRadiusTopRight: 3,
    marker: {
      symbol: 'circle',
      fillColor: 'white',
      lineColor: '#7FC315',
      lineWidth: 3
    },
    // fillColor: '#7FC315',
    // fillOpacity: 0.9,
    lineWidth: 1
  });
}

updateNavTabs = function() {
  var display = function ($target, count) {
    var dataKey = ((count <= 0) ? "zero" : (count <= 1) ? "one" : "many");
    var title = $target.closest("li").data(dataKey)
    $target.text(count);
    $target.closest("a").text(" " + title).prepend($target);
  }

  display($('strong.applicants'), calculateNumber(applicantsData));
  display($('strong.registrants'), calculateNumber(registrantsData));
  $('strong.conversion').text(calculateConversation(conversionData) + '%');
}

getDataSource = function(data) {
  var dataSource = [];
  if (currentInterval == 'days') {
    dataSource = data[currentIndex].drilldown.data;
  } else {
    for (var i=0; i<data.length; i++) {
      if (data[i].drilldown.year == selectedYear()) {
        dataSource = dataSource.concat(data[i].drilldown.data);
      }
    }
  }
  return dataSource;
}

calculateNumber = function(data) {
  var dataSource = getDataSource(data);
  var number = 0;
  for (var i=0; i<dataSource.length; i++) {
    number += dataSource[i];
  }
  return number;
}

calculateConversation = function(data) {
  var dataSource = getDataSource(data);
  var number = 0;
  var length = 0;
  for (var i=0; i<dataSource.length; i++) {
    if (dataSource[i] != 0) {
      number += dataSource[i];
      length ++;
    }
  }
  if (length != 0)
    number = (number/length).toFixed(0);
  return number;
}

chart = new Highcharts.Chart({
  chart: {
    renderTo: 'pipeline',
    type: 'column',
    spacingTop: 10
  },
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: #{(1..Time::days_in_month(Date.current.month)).map{ |d| d }.inspect }
  },
  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: null
    }
  },
  tooltip: {
    shadow: true,
    useHTML: true,
    formatter: function() {
      var title;
      if (currentInterval == 'months') {
        titleInside = '<b>' + monthNames[monthCategories.indexOf(this.x) + 1] +'</b><br/>'
      } else {
        titleInside = '<b>' + monthNames[currentIndex % 12 + 1] + ' ' + this.x +'</b><br/>'
      }
      title = '<div class="highChartsTooltip">'+ titleInside + this.series.name + ': ' + Math.round(this.y) + '</div>'
      if (currentView == 'Conversion Rate') {
        title = '<div class="highChartsTooltip">'+ titleInside + this.series.name + ': ' + Math.round(this.y) + '%' + '</div>'
      }
      return title
    }
  },
  plotOptions: {
    area: {
      fillOpacity: 0.05,
      point: {
        events: {
          click: function() {
            chartPointClick(this)
          }
        }
      }
    },
    column: {
      cursor: 'pointer',
      point: {
        events: {
          click: function() {
            chartPointClick(this)
          }
        }
      }
    }
  },
  series: []
});

chartPointClick = function(sender) {
  var drilldown = sender.drilldown;
  if (drilldown) {
    currentInterval = 'days';
    if (currentIndex < 12) {
      currentIndex = drilldown.month - 1;
    } else {
      currentIndex = 12 + drilldown.month - 1;
    }
    switchChartSeries();
  } else {
    var start_date = new Date(selectedYear(), currentIndex % 12, sender.x + 1);
    var end_date = new Date(selectedYear(), currentIndex % 12, sender.x + 2);
    var url = '#{admin_students_path}'

    if( currentView == "Inquiries" ){
      var search_type = 'created';
      var status_scope = 'inquiries_students';
    } else{
      var search_type = 'submitted';
      var status_scope = 'applied_students';
    }

    var params = encodeURI('display_all=true&default=') + status_scope + encodeURI('&result_type=and&search[') + search_type + encodeURI('_at_gteq]=') + $.datepicker.formatDate('yy-mm-dd', start_date) + '&' +
    encodeURI('search[') + search_type + encodeURI('_at_lteq]=') + $.datepicker.formatDate('yy-mm-dd', end_date);

    document.location.href = url + '?' + params
  }
}

switchChartInterval = function(sender, interval) {
  $('.chart_interval a').removeClass('active')
  sender.addClass('active');
  currentInterval = interval;
  if (interval == 'months') {
    year = selectedYear();
    setYear(year);
  }
  switchChartSeries();
}

$('.boxes li').click(function() {
  var $this = $(this);
  var proposedView = $this.data('view');
  if (currentView != proposedView) {
    currentView = proposedView;
    if (currentView == 'RSVPs') {
      $('#pipeline').hide()
      $('#rsvps').show()
      $('.months-filter').hide()
    } else {
      $('#rsvps').hide()
      $('#pipeline').show()
      $('.months-filter').show()
      switchChartSeries();
    }

    $('.boxes li').removeClass('active');
    $this.addClass('active');
  }
  return false;
})

$('.boxes li[data-view="' + currentView + '"]').addClass('active');

$('#programs').change(function() {
  var program = $(this);
  $.ajax({
    url: "#{admin_dashboard_change_program_path}",
    data: {
      program_id: program.val(),
      current_view: currentView,
      current_month: currentIndex % 12 + 1,
      current_year: selectedYear(),
      current_interval: currentInterval
    },
    beforeSend: function() {
      program.hide();
      $('#programs_spinner').show();
    },
    complete: function() {
      switchChartSeries();
      if($('.boxes li.active').data('view') === 'RSVPs'){
        $('#pipeline').hide()
        $('#rsvps').show()
        $('.months-filter').hide()
      }
    }
  })
})

switchChartSeries();

});

非常感谢你们的帮助!

Answer 1

这里的#{...}

var monthCategories = #{Date::ABBR_MONTHNAMES[1..12].inspect};

是 ruby 代码:仅适用于 ruby 。它本身不是有效的javascript:当它通过erb解释器运行时，它将 生成(希望如此)有效的js。

例如，您可以在 js.erb文件(或者与此相关的html.erb文件)中进行操作，因为.erb文件是用ruby评估的。但是您不能在纯js文件中执行此操作。