Set URL without refreshing whole template in Aurelia

Question

In my Aurelia webapp, I have a page with links. These are caught with a click.delegate="" , which goes to a method in the code-behind. The view code will then use http-fetch to make AJAX calls and then refresh the data just by updating an internal variable which is bound to some elements in the HTML template. Works perfectly, except for one thing - it's not reflected in the URL location bar (in the browser -- so bookmarking is impossible).

One solution is to create a route with a parameter. This will call the activated() method, w. the param. I've observed that the constructor is not called over and over (when navigating to the same route, but with different params), so I guess the same instance of the ViewModel is being used.

{ route: 'cell-detail/:id', name: 'cell-detail', moduleId: 'cell-detail',     title: 'cell-detail' },

However, I want to know (and prevent) the whole HTML template from being rendered every time, not just the part of the changed bound variable. I'm already using activationStrategy.invokeLifecycle , so maybe it's already working this way. I don't know how to find out.

Is this correct, and if so, is there any way to update the URL/location bar, without repainting the whole HTML template (set a new location to reflect internal changes w/o using the router maybe)?

Update Observing the DOM changes in the Elements tab in Chrome Developer Tools, it seems like Aurelia only updates what's changed - like React's shadow-dom. At least there's a big visible difference (the HTML lights up/flashes in the dev console) if using activationStrategy.replace .

However, there seems to be a small difference when using the router vs. just updating an internal bound variable, so if anyone knows for sure what's happeing, that would be enlightening.

Answer 1

Why don't you just use the History's API pushState method

 history.pushState({someState : someStateValue}, "new title", newUrl);

Of course, you'll need to handle the restoring of the proper state yourself when the user deeplinks to that url. You could do that in the activate method base on the params object

activate(params){
    // params.relevantStateValue1
    // params.relevantStateValue2
    // etc
}