javascript - Backbone.js，无法在回调上设置上下文

Question

好的，所以我正在研究一种方法来覆盖模型上的获取方法。我希望能够向它传递一个 URL 列表，并让它对每个 URL 进行提取，对结果应用一些处理，然后在它们全部完成时更新它自己的属性。这是基本设计:

1. 一个名为 AllVenues 的父“包装器”模型有一个自定义获取函数，该函数读取实例化时给定的 URL 列表
2. 对于每个 URL，它创建一个子模型并在其上调用 fetch 指定该 URL 以及成功回调。
3. AllVenues 实例还有一个属性progress，它需要在成功回调中更新该属性，以便它知道所有子提取何时完成。

这就是我遇到问题的部分。当子模型获取完成时，成功回调没有最初调用它的父模型的上下文。我有点破解它，因为我可以访问模块并将父模型存储在一个变量中，但这对我来说似乎不正确。父模型执行了子模型的获取，因此它应该能够以某种方式传递上下文。我不想在其中硬编码引用。

长话短说

这是我的 jsFiddle 说明问题。有趣的部分从第 13 行开始。http://jsfiddle.net/tonicboy/64XpZ/5/

完整代码:

// Define the app and a region to show content
// -------------------------------------------
var App = new Marionette.Application();
App.addRegions({
    "mainRegion": "#main"
});

App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {
    var MainView = Marionette.ItemView.extend({
        template: "#sample-template"
    });

    var AllVenues = Backbone.Model.extend({
        progress: 0,
        join: function (model) {
            this.progress++;
            // do some processing of each model
            if (this.progress === this.urls.length) this.finish();
        },
        finish: function() {
            // do something when all models have completed
            this.progress = 0;
            console.log("FINISHED!");
        },
        fetch: function() {
            successCallback = function(model) {
                console.log("Returning from the fetch for a model");
                Mod.controller.model.join(model);
            };
            _.bind(successCallback, this);
            $.each(this.urls, function(key, val) {
                var venue = new Backbone.Model();
                venue.url = val;
                venue.fetch({
                    success: successCallback
                });
            });
        }
    }); 

    var Venue = Backbone.Model.extend({
        toJSON: function () {
            return _.clone(this.attributes.response);
        }
    });

    var Controller = Marionette.Controller.extend({
        initialize: function (options) {
            this.region = options.region;
            this.model = options.model;
            this.listenTo(this.model, 'change', this.renderRegion);
        },
        show: function () {
            this.model.fetch();
        },
        renderRegion: function () {
            var view = new MainView({
                model: this.model
            });
            this.region.show(view);
        }
    });
    Mod.addInitializer(function () {
        var allVenues = new AllVenues();
        allVenues.urls = [
            'https://api.foursquare.com/v2/venues/4a27485af964a52071911fe3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130811',
            'https://api.foursquare.com/v2/venues/4afc4d3bf964a520512122e3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130811',
            'https://api.foursquare.com/v2/venues/49cfde17f964a520d85a1fe3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130811'
        ];
        Mod.controller = new Controller({
            region: App.mainRegion,
            model: allVenues
        });
        Mod.controller.show();
    });
});
App.start();

Answer 1

我认为您误解了如何 _.bind作品。 _.bind 返回绑定(bind)函数，它不会就地修改它。事实上，文档在这方面可能更清楚一些。

所以这样:

_.bind(successCallback, this);

没有意义，因为您忽略了 _.bind 返回的绑定(bind)函数。我想你想说的是:

var successCallback = _.bind(function(model) {
    console.log("Returning from the fetch for a model");
    Mod.controller.model.join(model);
}, this);

另请注意，我添加了一个缺少的 var，可能您不希望 successCallback 是全局的。