Как правильно настроить функции CoffeeScript в браузере?

Question

(->
  jQuery ->
    globalThis = @
    $('#emailTypes').change ->
      globalThis.toggleEmailOptions()

  toggleEmailOptions = ->
    $('.emailTypeOptions').fadeOut 'fast', ->
      for emailType in $('#emailTypes').val()
        $("##{emailType}Options").fadeIn()


).call this

Это мой .coffee файл.Однако функция toggleEmailOptions не входит в сферу применения jQuery ready.Как я могу сделать это в объеме?

Answer 1

С http://jashkenas.github.com/coffee-script/

Применяются обычные предостережения о CoffeeScript - ваши встроенные скрипты будут выполняться в оболочке закрытия, поэтому, если вы хотите предоставить глобальные переменные или функции, присоедините их к объекту окна.

Или связать с exports, если вы используете node.js.

Для вашего примера это становится:

window.toggleEmailOptions = ->

Answer 2

Я думаю, вам не нужно переносить, потому что coffeescript уже делает это, вот как я бы переписал ваш код:

jQuery ->
  toggleEmailOptions = ->
    $('.emailTypeOptions').fadeOut 'fast', ->
      for emailType in $('#emailTypes').val()
        $("##{emailType}Options").fadeIn()

  $('#emailTypes').change ->
    toggleEmailOptions()

Answer 3

Здесь есть пара проблем.Во-первых, вы, похоже, предполагаете, что @ / this является глобальным объектом (window) из обратного вызова jQuery.Но легко понять, что это не так:

jQuery -> console.log @ is window  # false

Помните, что обратные вызовы могут вызываться в любом контексте, который хочет библиотека.В этом случае @ равно document.И document.toggleEmailOptions не существует.

Кроме того, если вы хотите, чтобы toggleEmailOptions был глобальным, вам необходимо прикрепить его к window (или @ / this, поскольку @ is window в самой внешней области вашего файла).Это потому, что когда вы просто пишете toggleEmailOptions = ..., CoffeeScript устанавливает его в файл с помощью объявления var.Это легко увидеть, посмотрев на скомпилированные JS: var s всегда находятся на вершине своей области видимости.К счастью, область файла - это то, что вы хотели в любом случае.

Так что в основном: не думайте об этом!То, что вы хотите:

jQuery ->
  $('#emailTypes').change ->
    toggleEmailOptions()

и оставьте все как есть.