Coffeescript - Как преобразовать javascript в coffeescript в Ruby on Rails?
У меня есть кнопка в моих представлениях в test.html.erb, как показано ниже
<button id = "Todo_full" onclick = "showFullscreen(this);">Full size</button>
и его javascript выглядит следующим образом:
function showFullscreen(event)
{
var elem = document.getElementById('card_' + event.id);
if (elem.requestFullscreen) {
return elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen)
{
/* Firefox */
return elem.mozRequestFullScreen();
}
}
Когда я сохраняю код javascript внизу файла test.html.erb, он работает нормально.
И когда я конвертирую этот код в coffeescript через http://js2.coffee/ и сохраняю код в app/assets/javascript/test.coffee, который выглядит следующим образом:
showFullscreen = (event) ->
elem = document.getElementById('card_' + event.id)
if elem.requestFullscreen
return elem.requestFullscreen()
else if elem.mozRequestFullScreen
### Firefox ###
return elem.mozRequestFullScreen()
return
Показывает ошибку в консоли
Uncaught ReferenceError: showFullscreen is not defined
at HTMLButtonElement.onclick ((index):384)
Даже когда я использую window.onload = -> в верхней части кода coffeescript, я получаю ту же ошибку в консоли.
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема, с которой вы столкнулись, - это различие в области видимости между JS и CoffeeScript. Чтобы ваш код заработал, вам необходимо глобально охватить вашу функцию на window или сокращении CoffeeScript @.
If you’d like to create top-level variables for other scripts to use, attach them as properties on
window.
Что для вашей функции будет выглядеть так:
# Using window
window.showFullscreen = (event) ->
elem = document.getElementById('card_' + event.id)
...
# Or using @
@showFullscreen = (event) ->
elem = document.getElementById('card_' + event.id)
...
CoffeeScript @ - это сокращение от this в JavaScript. Итак, в вашем примере, потому что вы определяете функцию в области окна верхнего уровня window == @. Имейте в виду, что в пределах ваши функции область видимости будет другой и window != @, и вместо этого @ будет ограничен тем, что this находится внутри вашей функции. В этом сообщении в блоге есть хорошее объяснение:
Speaking of
this, CoffeeScript has a shortcut for it, the@symbol. It's easy to write this off as meaningless syntactical sugar, but it is useful. First, constructor parameters prefixed with@are converted into properties:# CoffeeScript class User constructor: (@id) ->// JavaScript function User(id) { this.id = id; }Beyond this though, it's a nice way to define class method:
# CoffeeScript class User constructor: (@id) -> @findById: (id) => ...// JavaScript function User(id) { this.id = id; } User.findById = function() {};Neither
@nor the fat arrow=>mean that you don't have to worry about the current meaning ofthis(or its alias@). They aren't silver bullets, which isn't to say that they don't add value.
Спасибо за ответ, братан, но я перестал работать над технологией ror.
Ой облом @shashiverma! RoR по-прежнему мой фаворит :-) Если вы думаете, что этот ответ в любом случае был полезен, не могли бы вы отметить, что это правильный ответ для будущих зрителей? Из любопытства, с какими технологиями вы работаете сейчас?
конечно, почему бы и нет, я создал шаблон администратора заранее, но меня всегда смущали конвейеры, CoffeeScript, в какой последовательности мы должны импортировать (или требовать) библиотеки. Сейчас я работаю над фреймворком javascript vuejs.
Эти фрагменты кода не совсем эквивалентны. Один JavaScript определяет функцию Глобальный
showFullscreen, тогда как CoffeeScript создает локальную функциюshowFullscreenвнутри оболочки области видимости. Возможно, вы хотите сказать@showFullScreen = (event) -> ...илиwindow.showFullScreen = (event) -> .... Или, лучше, вообще не используйте атрибутonclick, создавайте локальные функции и привязывайте их к элементам.