Question

我有一些非常简单的代码。不幸的是，在该代码的底部是一个带有一些硬编码jQuery选择器的回调，我想找到一种方法将它们带出来。

为了本练习的目的，让我们假设：

.text-shows-up-这里是文字出现的地方
.user-types-这是用户实际输入文本的位置

这很简单：用户在某处键入，文本在其他地方复制。这是代码。

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

你已经注射了.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')
                                     });

Answer 2

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')
                                     });

关键是使用'=＆gt;'创建update_text。 Coffeescript docs很清楚：

在JavaScript中，'this'关键字的动态范围是指   当前函数附加到的对象。如果你通过了   作为回调函数或将其附加到不同的对象，   'this'的原始值将丢失。如果你不熟悉这个   行为，这篇数字网络文章给出了很好的概述   怪异。

胖箭=＆gt;可用于定义函数和绑定它   到现在的'this'的当前值。这很有用   使用基于回调的库（如Prototype或jQuery）进行创建   迭代器函数传递给每个或要使用的事件处理函数   与绑定。 使用胖箭头创建的功能可以访问   定义它们的'this'的属性。

CoffeeScript：使回调更通用

2 个答案: