How to set active links (navbar) in an async ufront app

Question

I try to figure out how to set active links in a navbar or sitebar for an async ufront application.

On the server I can load and parse it dynamically inside the main (top level) controller via an api call like:

@inject public function init(context:HttpContext) {
    ufTrace("HomeController::init");

    var navStr:String = "";
    //getNavbar loads the navbar html snippet and parses the code to set 'active' some tags in relation to the request uri
    var navbarSurprise = siteApi.getNavbar(context.request.uri);
    navbarSurprise.handle(function (outcome) { 
        switch (outcome) {
            case Success(navbarStr): navStr = navbarStr;
            case Failure(err): navStr = "<h1>Could not load navigation: $err</h1>";
        }
    } );
    ViewResult.globalValues["navBar"] = navStr;

}

but that doesn't work on the client for pushstate urls. (navStr would always be empty)

The ViewResult.hx (line:126) doc states: Helpers (dynamic functions) can be included in your ViewResult also.

Could this be a place to handle that? But unfortunately I couldn't find any help/examples how to add helper functions to a ViewResult.

I was also thinking about doing it in a custom ViewEngine. But that seems a bit like overcomplicating things.

Any thoughts about that would be appreciated.

Answer 1

Seems your are looking to render the navbar on the server when processing the request.

I did something like that some time ago by using sipple (another templating engine) but you can also use other engine (i think) like haxe template or erazor etc.

This issue sums up how i processed different partials using stipple

Hope it helps.