Nittro AJAX events demo

MyService.js

// For a global handler you can create a custom service.
// You'd include this file in your minified site script after Nittro but before bootstrap:
_context.invoke('App', function() {
    var MyService = _context.extend(function(page, ajax) {
        this._ = {
            page: page,
            ajax: ajax
        };
        
        this._.page.on('create-request', this._handleCreateRequest.bind(this));
        this._.ajax.on('request-created', this._handleRequestCreated.bind(this));
        this._.page.on('update', this._handleUpdate.bind(this));
        this._.page.on('error', this._handleError.bind(this));
        
    }, {
        _handleCreateRequest: function(evt) {
            /**
             * This event is triggered on the Page service _before_ an actual request is initiated.
             * If you call the evt.preventDefault() method, the request will not be sent.
             *
             * evt.data has the following keys:
             *  - 'url': the request URL
             *  - 'method': the request method
             *  - 'data': GET or POST data, depending on method
             *  - 'context': the DOM element which originated the request, if any
             */
        },
        
        _handleRequestCreated: function(evt) {
            /**
             * This event is triggered by the Ajax service after a request
             * has been created, but before it is dispatched.
             * The evt.data.request property holds the Nittro.Ajax.Request object
             * wrapping the request. This is where you can set event handlers
             * for the request.
             */
        },
        
        _handleUpdate: function(evt) {
            /**
             * This is triggered by the Page service on update.
             * The evt.data property contains the response payload.
             * Note that this event is also triggered upon the initial
             * page load, but the payload will be empty then.
             */
        },
        
        _handleError: function(evt) {
            /**
             * This event is triggered by the Page service when an AJAX
             * request results in an error. The evt.data.type property
             * describes the type of the error that occured, for example
             * 'connection' or 'abort'. The default handler for an error
             * shows a flash message; if you bind a listener to this event
             * and the listener calls evt.preventDefault(), the flash message
             * won't be displayed.
             */
        }
    });
    
    // this will register the 'MyService' class within the 'App' namespace
    _context.register(MyService, 'MyService');
    
});

// Then you need to register the service in your bootstrap and give it the "run" flag,
// so that it starts listening for events rightaway. For example you could put in your
// bootstrap.js something like this:

var di = new Nittro.DI.Context({
    params: { /* ... */ },
    services: {
        /* ... */
        myService: 'App.MyService()!'
    },
    factories: { /* ... */ }
});

template.latte

<!-- For a single specific link you can use the following, assuming you use the _stack pattern: -->
<a n:href="Some:action" id="myLink">My link</a>

<script type="application/javascript">
_stack.push(function(di, Utils) {
    Utils.DOM.addListener('myLink', 'click', function(evt) {
        evt.preventDefault();
        
        // code to be executed before the link is loaded
        
        var promise = di.getService('page').openLink(evt.currentTarget);
        
        promise.then(function(payload) {
            // code to be executed after link is loaded and the page updated
        }, function() {
            // code to be executed if there's an error loading the link
        });
    });
});
</script>