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

Posted 2023-05-09

【中文标题】Coffeescript 和 jQuery 无法在特定视图上使用 Ruby on Rails

【英文标题】：Coffeescript and jQuery not working using Ruby on Rails on a particular view

【发布时间】：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)
####

【参考方案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