If method returns data then load in module(view) – Aurelia

Asked By: Anonymous

Forgive me for my ignorance but I’ve just started out with Aurelia/ES6 and a lot baffles me at the moment. I’m completely new to client side frameworks, so hopefully what I’m trying to achieve is possible within the framework.

So as the title indicates I’m fetching data within a class:

import {inject} from "aurelia-framework";
import {HttpClient} from "aurelia-http-client";

let baseUrl = "/FormDesigner/";

@inject(HttpClient)
export class FormData{

    constructor(httpClient)
    {
        this.http = httpClient;
    }

    GetFormById(formId)
    {
        return this.http.get(`${baseUrl}/GetFormById/${formId}`)
                        .then(resp => resp.content);
    };
}

Now I can see/receive the data which is great but after digging into the docs I cannot seem to figure out:

1. Load a separate related module/view by Id into the main view (app.html)
2. If no data, error and no Id passed then redirect to no-form view

Scenario:

User A navigates to “FormDesigner/#/form/3E7689F1-64F8-A5DA0099D992” at that point “A” lands on the form page, now if successful and data has been returned pass the formId into a different method elsewhere and then load in a module/view – Pages, possibly using <compose></compose>

This is probably really simple but the documentation (in my opinion) seems rather limited to someone that’s new.

Really appreciate any guidance/high level concepts, as always, always much appreciated!

Regards,

Solution

Answered By: Anonymous

Sounds like you might want to just partake in the routing lifecycle

If you are navigating to a module you can create an activate method on the view model which will be called when routing starts.

In this method you can return a promise (while you fetch data) and redirect if the fetch fails

In fact if the promise is rejected, the routing will be cancelled

If successful you can use whatever method you need to load in your module (assuming it can’t just be part of the module that is being loaded since routing won’t be cancelled)

Something like

activate(args, config) {
    this.http.get(URL).then(resp => {
        if (resp.isOk) {
           // Do stuff
        } else {
          // Redirect
        }
    });
}