Load-component-data

As a front-end developer you’ll often find yourself loading data at the beginning of your component startup and continuing only after the data has been loaded.

The load-component-data-hook simplifies this task. Within the return-object of a javascript-component, you can specify a loadComponentData method where you load your data. This method must return a promise or your desired data straight away. If such a method is specified the AdminBundle delays the startup of your component and sets this.data with your laoded data (where this is the context of your component). So when your components initialize method gets called you can conveniently access your data via this.data and don’t have to worry about asynchronicity.

So the loadComponentData and initialize method of your component would look somthing like:

/**
 * This method gets called by the AdminBundle
 */
loadComponentData: function() {
    var promise = $.Deffered();

    $.ajax({
        url: '/url-to-your-data',
    }).done(function(data) {
        //resolve promise. So your component can continue with the startup
        promise.resolve(data);
    });

    return promise;
},

/**
 * When this method gets called this.data is already set with
 * your loaded data
 */
initialize: function() {
    // this.data is set with your data and can be used for whatever you want
    this.render(this.data);
}