0

我正在使用主干，我有这个代码：

render: function() {
    var displayData = this.model;

    fetchData('checkComplete', this.model.id, function(checkCompleteData) {
        displayData.complete = checkCompleteData; // Value is true
    });

    fetchData('showGraphicAssets', this.model.id, function(showGraphicsData) {
        $.each(showGraphicsData, function(index, value) {
            if (value.type === "GRAPHIC_A") {
                displayData.assetId = value.id; // Value is 808
            }
        });
    });

    console.log(displayData.complete); // Valus is undefined
    console.log(displayData.assetId); // Value is undefined

    var html = this.template.tmpl(displayData.toJSON());
    $(this.el).html(html);
}

fetchData = function(dataRequest, id, callback) {
request = '/show/' + id + '/completed.json';
$.ajax({
    url: '/app' + request,
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        callback(data);
    }
});

};

如您所见，我displayData在函数之外定义了变量fetchData。当我尝试在fetchData上下文中添加属性时，它可以工作，而当我尝试在fetchData上下文之外使用它时，它会导致未定义。我怎样才能解决这个问题？

4

1 回答 1

0

这是人们使用 JavaScript 时最常见的问题。您不尊重回调的异步性质。

你不能在回调函数中设置一个值（就像你用 做的那样displayData.assetId）并假设它必须在几行之后才可用。它不是。永远不会。

回调完成后将可用。由于您有其中两个，请使用专门用于处理多个异步调用的 jQuery$.when()函数（及其伙伴.then(),.fail()和）：.always()

render: function () {
    var self = this, model = self.model, template = self.template;

    $.when(
        $.get('/app/show/checkComplete/' + model.id + '/completed.json'),
        $.get('/app/show/showGraphicAssets/' + model.id + '/completed.json')
    )
    .then(function (checkCompleteData, showGraphicsData) {
        // this will receive the response data in the correct order

        model.complete = checkCompleteData;

        $.each(showGraphicsData, function (index, value) {
            if (value.type === "GRAPHIC_A") {
                model.assetId = value.id;
                return false; // break the $.each()
            }
        });

        $(self.el).html( template.tmpl(model.toJSON()) );
    })
    .fail(function () {
        // this will be called if either HTTP request fails
        // also check out the arguments and react accordingly to errors
    });
}

请注意，由于您需要更少的样板，代码也变得更短。

如果您确保您的视图使用正确的 Content-Type ( application/json) 就$.get()足够了；避免$.ajax()在视觉上更清洁。

于 2013-03-17T08:00:39.077 回答