Handling async template operations

You probably know how easy is to use expressions in your HTML templates. Let's say that we have the following component and HTML on the page:

HTML:
<h1><% this.getData() %></h1>
JavaScript:
absurd.component("Component", {
    html: 'h1',
    getData: function() {
        return 'AbsurdJS';
    },
    constructor: function() {
        this.populate();
    }
})();

The result of the example is that the heading tag is filled with some text - <h1>AbsurdJS</h1>. Now let's say that the function getData has to perform some asynchronous operation. If we keep the template the same it will not work, because the method is executed immediately during the population. Luckily AbsurdJS provides a mechanism for solving such issues.

HTML:
<h1><% this.async('getData') %></h1>
JavaScript:
absurd.component("Component", {
    html: 'h1',
    getData: function(callback) {
        setTimeout(function() {
            // this runs after 2 sec
            callback('It\'s done.');
        }, 2000);
    },
    constructor: function() {
        this.populate();
    }
})();

The idea is to receive a callback which you need to run once your asynchronous action finishes. You still can pass parameters to your function. Just remember that the callback is always the first argument. The rest are yours.





comments powered by Disqus