Coffeescript 和 jQuery 无法在特定视图上使用 Ruby on Rails答案

【问题标题】：Coffeescript and jQuery not working using Ruby on Rails on a particular viewCoffeescript 和 jQuery 无法在特定视图上使用 Ruby on Rails
【发布时间】：2017-07-04 16:07:46
【问题描述】：

我在使用 Ruby on Rails (4.1.4) 时遇到了 javascript 问题。它只有一个控制器，我不知道为什么 - 有人知道吗？谢谢你。

####This works :)
$(document).on "turbolinks:load", ->
  $('#redemption_amount').keyup updateWorth
  $('#redemption_amount').change updateWorth

 updateWorth = ->
    discount = ($('#discount').val() / 100)
    worth = $(this).val() * discount
    $('#redemption_worth').html(worth.toFixed(2))
#####

问题来了：

####This does not work :(
$(document).on "turbolinks:load", ->
  $('#purchase_amount').keyup updatePoints
  $('#purchase_amount').change updatePoints

  updatePoints = ->
        points = (Math.round($(this).val() * 0.92))
        $('#purchase_points').html(points)
####

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-4 coffeescript

【解决方案1】：

缩进定义了 CoffeeScript 代码的结构，因此如果您的缩进关闭，那么您的代码也关闭。

第一种情况：

$(document).on "turbolinks:load", ->
  $('#redemption_amount').keyup updateWorth
  $('#redemption_amount').change updateWorth

 updateWorth = ->
    discount = ($('#discount').val() / 100)
    worth = $(this).val() * discount
    $('#redemption_worth').html(worth.toFixed(2))

JavaScript 看起来像：

var updateWorth;
$(document).on("turbolinks:load", function() {
  $('#redemption_amount').keyup(updateWorth);
  $('#redemption_amount').change(updateWorth);
});
updateWorth = function() { ... };

所以当keyup 和change 被调用时，updateWorth 的值是一个函数，一切正常。

第二种情况：

$(document).on "turbolinks:load", ->
  $('#purchase_amount').keyup updatePoints
  $('#purchase_amount').change updatePoints

  updatePoints = ->
        points = (Math.round($(this).val() * 0.92))
        $('#purchase_points').html(points)

JavaScript 最终如下：

$(document).on("turbolinks:load", function() {
  var updatePoints;
  $('#purchase_amount').keyup(updatePoints);
  $('#purchase_amount').change(updatePoints);

  updatePoints = function() { ... };
});

您的缩进将updatePoints 放入回调中。当keyup 和change 被调用时，updatePoints 的值为undefined，因为updatePoints = function() { ... } 部分还没有到达。

经验法则：

在使用之前定义事物（按照代码的行序）。
要非常小心并与您的空格保持一致：如果您在一个位置缩进两个空格，则在所有位置缩进两个空格。

你应该说：

updateWorth = ->
  discount = $('#discount').val() / 100
  worth = $(@).val() * discount
  $('#redemption_worth').html(worth.toFixed(2))

$(document).on "turbolinks:load", ->
  $('#redemption_amount').keyup updateWorth
  $('#redemption_amount').change updateWorth

和：

updatePoints = ->
  points = (Math.round($(@).val() * 0.92))
  $('#purchase_points').html(points)

$(document).on "turbolinks:load", ->
  $('#purchase_amount').keyup updatePoints
  $('#purchase_amount').change updatePoints

【讨论】：