Chaîne de promesses Jquery

J'ai une simple chaîne d'événements:

  1. Obtenir des Colonnes d'une table de métadonnées (async)
  2. charge colonnes sélectionnées (async)
  3. rendu liste

J'ai utilisé seulement à la chaîne de ces fonctions, chaque appel suivant, quand il a eu terminé. Cependant, ce n'est pas très évident que ce qui se passe (l'appel de getColumnsFromMeta résultats dans la vue en cours peuplée). Donc, dans l'intérêt de la clarté et du code de la réutilisation je tiens à refactoriser à l'aide de JQuery Promises. J'ai utilisé des promesses avant. Mais comment je fais de la chaîne de plus de deux? getColumnsFromMeta ().then(loadSourceFromDatabase /*some arguments*/) //.then(renderList)?;

Voici un exemple de la getColumnsFromMeta:

var getColumnsFromMeta = function(id)
{
    var sql,
        dfd;

    dfd = $.Deferred();

    var onSuccess = function(tx, result)
    {
        var columns = [];

        for (var i = 0; i < result.rows.length; i++) 
        {
            columns.push(result.rows.item(i).Column);
        }

        dfd.resolve(columns);
    };

    var onError = function(tx, error)
    {
        dfd.reject(error);
    };

    sql = "SELECT Column FROM Meta WHERE id = ?";

    database.query(sql, [id], onSuccess, onError);

    return dfd.promise();
};

source d'informationauteur JonWells

  1. 27

    Il devrait être quelque chose comme:

    function getColumnsFromMeta()
{
    var d = $.Deferred();

    //retrieve data in async manner and perform
    //d.resolve(columns);

    return d.promise();
}

function loadSelectedColumns(columns)
{
    var d = $.Deferred();

    //retrieve data in async manner and perform
    //d.resolve(data);

    return d.promise();
}

function render(data)
{
    //render your data
}

getColumnsFromMeta().pipe(loadSelectedColumns).pipe(render);

    http://jsfiddle.net/zerkms/xYDbm/1/ - voici un exemple de travail

    http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/ -- c'est l'article que j'aime vraiment à propos de promesses

  2. 4

    zerkms réponse m'a aidé, après avoir réfléchi. Je vais poster ce que j'ai fait ici dans le cas d'un exemple avec plein contexte est utile.

    /**
 * takes a list of componentIDs to load, relative to componentRoot
 * returns a promise to the map of (ComponentID -> componentCfg)
 */
function asyncLoadComponents (componentRoot, components) {

    var componentCfgs = {};

    function asyncLoadComponentCfg(component) {
        var url = _.sprintf("%s/%s", componentRoot, component);
        var promise = util.getJSON(url);
        promise.done(function(data) {
            componentCfgs[component] = data;
        });
        return promise;
    }

    var promises = _.map(components, asyncLoadComponentCfg);
    var flattenedPromise = $.when.apply(null, promises);
    var componentCfgPromise = flattenedPromise.pipe(function() {
        //componentCfgs is loaded now
        return $.Deferred().resolve(componentCfgs).promise();
    });

    return componentCfgPromise;
}


var locale = 'en-US';
var componentRoot = '/api/components';
var components = ['facets', 'header', 'DocumentList'];
$.when(asyncLoadComponents(componentRoot, components)).done(function(componentCfgs) {
    buildDocumentListPage(locale, componentCfgs)
});