Question

Coffeescript is placing the var directive on the wrong place. I have tried placing braces on the functios but no success. Here is the coffeescript code:

jQuery (->

  $(".item-scaffold-edit").live("click", (=>
    element = $(this)
    cont = element.data("cont")
    url = element.data("url")
    $.ajax(url,
      dataType: "html"
      success: (data, textStatus, jqXHR) ->
        $("##{cont}").html(data)
        $("##{cont}").data("url", url))))

  $(".item-menu").live("click", (=>
    element = $(this)
    cont = element.data("cont")
    url = element.data("url")
    if url isnt $("##{cont}").data("url")
      $.ajax(url,
        dataType: "html"
        success: (data, textStatus, jqXHR) ->
          $("##{cont}").html(data)
          $("##{cont}").data("url", url)
          $("#navbar-left li").removeClass("active")
          element.parent().addClass("active"))))
)

It generates this:

(function () {
  jQuery((function () {
    var _this = this;
    $(".item-scaffold-edit").live("click", (function () {
      var cont, element, url;
      element = $(_this);
      cont = element.data("cont");
      url = element.data("url");
      return $.ajax(url, {
        dataType: "html",
        success: function (data, textStatus, jqXHR) {
          $("#" + cont).html(data);
          return $("#" + cont).data("url", url);
        }
      });
    }));
    return $(".item-menu").live("click", (function () {
      var cont, element, url;
      element = $(_this);
      cont = element.data("cont");
      url = element.data("url");
      if (url !== $("#" + cont).data("url")) {
        return $.ajax(url, {
          dataType: "html",
          success: function (data, textStatus, jqXHR) {
            $("#" + cont).html(data);
            $("#" + cont).data("url", url);
            $("#navbar-left li").removeClass("active");
            return element.parent().addClass("active");
          }
        });
      }
    }));
  }));
}).call(this);

But it should generate this:

(function () {
  jQuery((function () {    
    $(".item-scaffold-edit").live("click", (function () {
      var cont, element, url;
      var _this = this;
      element = $(_this);
      cont = element.data("cont");
      url = element.data("url");
      return $.ajax(url, {
        dataType: "html",
        success: function (data, textStatus, jqXHR) {
          $("#" + cont).html(data);
          return $("#" + cont).data("url", url);
        }
      });
    }));
    return $(".item-menu").live("click", (function () {
      var cont, element, url;
      var _this = this;
      element = $(_this);
      cont = element.data("cont");
      url = element.data("url");
      if (url !== $("#" + cont).data("url")) {
        return $.ajax(url, {
          dataType: "html",
          success: function (data, textStatus, jqXHR) {
            $("#" + cont).html(data);
            $("#" + cont).data("url", url);
            $("#navbar-left li").removeClass("active");
            return element.parent().addClass("active");
          }
        });
      }
    }));
  }));
}).call(this);

Anyone knows what’s wrong with my coffeescript code????

Answer 1

As far as I can tell from your example, you currently have:

foo -> bar => element = $(this)

which generates:

foo(function() {
  var _this = this;
  return bar(function() {
    var element;
    return element = $(_this);
  });
});

but you would like it to generate:

foo(function() {
  return bar(function() {
    var _this = this;
    var element;
    return element = $(_this);
  });
});

That would be identical to this:

foo(function() {
  return bar(function() {
    var element;
    return element = $(this);
  });
});

which you can generate using:

foo -> bar -> element = $(this)

eg, change the => into a ->. The documentation for the “fat arrow” is here, which explains how it differs from the normal arrow.