如何在我传递给getJSON作为成功回调的方法中返回我的对象​​?

时间:2014-03-24 22:02:37

标签: javascript jquery scope

在我的模型中,我成功加载了一些JSON,之后我只是向正在监听JSON已加载的人发送一个事件。

我的问题是范围。我找到了唯一的方法' main'可以成功地监听模型(使用jQuery的触发器方法)是通过使用jQuery别名为scope变量(在函数Model(ApplicationModel)内部)添加前缀。

我的预感是,在这种情况下,我可能会错过一种不那么令人困惑的处理范围的方式。

主要

require( [ "jquery", "models/applicationModel", "views/applicationView" ], function( $, ApplicationModel, ApplicationView ) {

var appModel = new ApplicationModel();

$( appModel ).on( "jsonLoaded", onJsonLoaded );
appModel.getJson();

function onJsonLoaded( e, data ) {
    console.log('main: onJsonLoaded', data );
}

});

应用模型

define( [ "jquery" ], function( $ ) {

function Model() {
    $scope = this;
};

Model.prototype.getJson = function() {
    $.getJSON( "/getTextfields", this.loadSuccess );
};

Model.prototype.loadSuccess = function( data ) {
    console.log('loadSuccess', data );
    $( $scope ).trigger( "jsonLoaded", [ data ] );
} 

return Model;
});

1 个答案:

答案 0 :(得分:1)

修改你的模块,使它像这样:

define( [ "jquery" ], function( $ ) {

function Model() {
    // Cache $(this) so that we don't call jQuery all the time.
    this.$this = $(this);
};

Model.prototype.getJson = function() {
    // Use bind so that `this` has the proper value in `loadSuccess`.
    $.getJSON( "/getTextfields", this.loadSuccess.bind(this) );
};

Model.prototype.loadSuccess = function( data ) {
    console.log('loadSuccess', data );
    // Used the cached `$this` rather than recomputing.
    this.$this.trigger( "jsonLoaded", [ data ] );
} 

return Model;

});

这里的关键是使用bind。它创建了一个新函数,this的值设置为传递给bind的第一个参数。