javascript - 如何通过主干中的 ajax 调用使用其模型渲染多个 View

Question

嘿大家¡ 我正在尝试绘制一个具有多个模型和主干相关 View 的屏幕。为此，我对服务器进行了相应的 ajax 调用，以获取此比赛的数据。首先我认为解决方案可能是 jquery 函数 $when(ajaxcall1,ajaxcall2)done(function) ，但是......

模型1.js

getFById: function (id, context, success, error) {
    this.fetch({
        data: {
            id: id
        }
    }).success(function () {
        success();
    }).error(function () {
        error();
    });
},

解析函数数据

parse: function (response) {
    response.pedidosEntrega = new App.PedidosbookingCollection(response.datosPedidosbookingDto);
    response.cabeceraBookingDto = response.cabeceraBookingDto;
    return response;
}

model2.js

getFByBooking: function (idBooking, context) {
    return $.ajax({
        async: true,
        context: context,
        cache: false,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json',
        data: {
            id: idBooking
        },
        url: this.datosPorFUrl,
    });
},

在我的 router.js 中有渲染 View 的调用。

$.when(this.model.getFById(idBooking, idFactura, this),
       this.collectionF1Candidatas.getFByBooking(idBooking))
    .done(_.bind(function (modelBooking, facturasCandidatas) {
        this.asociarF1BookingExito(facturasCandidatas);
    }, this));

问题是模型 1 中的函数解析与多次调用是异步的，并且不在 $when 语句中执行。如何使用解析函数来同步ajax调用？

我知道这不是 Backbone 的最佳解决方案。有人可以告诉我在这项技术中实现它的更好的解决方案吗？

谢谢大家...

Answer 1

首先，将成功(和错误？)回调传递给 getFByBooking 函数，以使界面与模型的 getFById 函数保持一致。这样，您就可以以相同的方式对待它们:

getFByBooking : function(idBooking, context, success /*, error*/) {
    $.ajax({
        // ...
        success: success
    });
}

现在，在您的路由器中，您可以将相同的成功回调传递给它们，但不要在第一个响应时调用它。您可以利用下划线/lodash _.after 的强大功能这里:

var success = _.bind(function (modelBooking, facturasCandidatas) {
    this.asociarF1BookingExito(facturasCandidatas);
}, this);

// let's tell it to only be invoked on the second call
success = _.after(success, 2);

this.model.getFById(idBooking, idFactura, success /*, error*/);
this.collectionF1Candidatas.getFByBooking(idBooking, idFactura, success /*, error*/);

我不知道 ECMA 6 在您的客户端上是否可用，但如果可以，您也可以使用 generators以更加优雅的方式完成同样的事情。这是 video这一切都很清楚。