CoffeeScript: делает обратный вызов более общим

Question

У меня есть довольно простой код. К сожалению, в нижней части этого кода есть обратный вызов с некоторыми жестко закодированными селекторами jQuery, и я хотел бы найти способ их вывести.

Для этого упражнения, давайте предположим, что:

• .text-шоу-до-вот где текст появляется
• .user-типа-вот где пользователь на самом деле вводится текст

Это просто: пользовательские типы где-то, текст реплицируется где-то в другом месте. Вот код.

class TextChanger 
    constructor: (@selector) -> 
    events = ['change', 'keydown', 'keyup', 'keypress'] 
    @bind(event) for event in events 

    update_text: -> 
    $('.text-shows-up-here').text $('.user-types-here').val() 

    bind: (event) -> 
    @selector.on(event, @update_text) 

window.Try ?= {} 
window.Try.textChanger ?= TextChanger 

А с другой стороны, в Javascript земли ...

var textChanger = new Try.textChanger($('.user-types-here')); 

Я хотел бы знать, если/как я могу принести эти два жестко закодированных селекторы из этого обратного вызова в 'bind':

bind: (event) -> 
    @selector.on(event, @update_text) 

Answer 1

class TextChanger 
    constructor: (options) -> 
    @source = options.source 
    @target = options.target 
    events = ['change', 'keydown', 'keyup', 'keypress'] 
    @bind(event) for event in events 

    update_text: => 
    @target.text @source.val() 

    bind: (event) -> 
    @selector.on(event, @update_text) 

window.Try ?= {} 
window.Try.textChanger ?= TextChanger 

А на стороне JS ...

var textChanger = new Try.textChanger({ 
             source: $('.user-types-here'), 
             destination: $('.text-shows-up-here') 
            }); 

Ключ в том, чтобы создать update_text с '=>'. Coffeescript docs очевидны:

В JavaScript, то «это» ключевое слово с динамической областью видимости означать объект, что функция тока подключен. Если вы передадите функцию в качестве обратного вызова или прикрепите ее к другому объекту, исходное значение будет «потеряно». Если вы не знакомы с этим поведением , эта статья в цифровом Интернете дает хороший обзор причуд .

Толстая стрелка => может использоваться как для определения функции, так и для ее привязки к текущему значению 'this', прямо на месте. Это полезно, когда использует библиотеки на основе обратного вызова, такие как Prototype или jQuery, для создания функций итератора для передачи каждой функции или обработчика событий для использования со связыванием. Функции, созданные с помощью стрелки жира, имеют доступ к свойствам «это», где они определены.

Answer 2

Вы уже введете .user-types-here; добавьте другой, а также просто используйте эти объекты вместо селекторов jQuery.

constructor: (options) -> 
    @source = options.source 
    @target = options.target 
    ... 

update_text: -> 
    @target.text @source.val() 

На вашем Чистый JavaScript стороне, просто отправить их в:

var textChanger = new Try.textChanger({ 
             source: $('.user-types-here'), 
             destination: $('.text-shows-up-here') 
            });