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.

Actually I think the ***Helpers (dynamic functions)*** are ViewResult static extensions like e.g. .addJsScriptToResult(the.script.js). Although it would be possible to alter the response there, it is not very clean because I would have to add this to every result. — michaPau, Jun 23 '15 at 11:11

score 2 · Answer 1 · answered Jun 21 '15 at 19:18

2

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.

answered Jun 21 '15 at 19:18

TiagoLr

2,782
22
16

Does this work for you for asynchronous calls from the client as well? Perhaps I am wrong but I have the impression that my api call does (in a less elegant way and doesn't get the partial at compile time) the same thing . I just can't get in work in the controllers init function. – michaPau Jun 23 '15 at 11:49
Yes the partials are loaded at compile time and rendered at runtime. I'm not sure what is wrong with your implementation, but i remember it is hard to get partials working with ufront using erazor, you can try switching to stipple as it provides better partial support. – TiagoLr Jun 24 '15 at 13:12
In my example the application just never waits for the surprise outcome which is returned by my async api call. The same call works as expected inside a route function for example; but not in the init function. Could be it has something to do with the miniject problem in the actual ufront version ..!? – michaPau Jun 24 '15 at 16:58
In that case I'm not sure, the easiest way would be to make it sync instead, if it has a negative impact on the app then you should discuss it with Jason Oneil he probably can give more advice. – TiagoLr Jun 25 '15 at 19:02

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

1 Answers1