Jquery 文件上传和 Backbone 的上下文答案

【问题标题】：context with Jquery file upload and BackboneJquery 文件上传和 Backbone 的上下文
【发布时间】：2013-01-24 20:26:34
【问题描述】：

我遇到了 jquery-file-upload 和 Backbone 的上下文问题。在 fileupload 'done' 回调中，我想调用 Backbone 视图中定义的另一个函数，但我丢失了上下文。

class MyBackboneView extends Backbone.view

    initialize_fileupload: ->
        $('form#my_form').fileupload
            done: (e, data) ->
                this.some_function()

    some_function: ->
        ...

浏览器控制台返回的错误是 “Uncaught TypeError: Object # has no method 'some_function'”因为“this”不再指代 Backbone 视图，而是指 jquery 表单元素。

有没有办法从回调中访问视图中的那个函数？

【问题讨论】：

标签： javascript jquery backbone.js coffeescript jquery-file-upload

【解决方案1】：

每个函数 (->) 都有自己的上下文 (this)。这包括done: (e, data) -> ...，以及initialize_fileupload: -> ...。而且，在这种情况下，它们每个都有自己的上下文值，所以 this.some_function() 没有引用您的 view。

因此，您必须定义 done 以保留周围的上下文（view）。这可以在 CoffeeScript 中通过使用“fat arrow”（=>）来定义它来完成：

initialize_fileupload: ->
    $('form#my_form').fileupload
        done: (e, data) =>
            this.some_function()

也可以通过将上下文值存储在作用域变量中来实现：

initialize_fileupload: ->
    thisView = this
    $('form#my_form').fileupload
        done: (e, data) ->
            thisView.some_function()

或通过binding the function 到周围的上下文：

initialize_fileupload: ->
    $('form#my_form').fileupload
        done: ((e, data) ->
            this.some_function()
        ).bind(this)

【讨论】：