Add ability to set route transition options in the view

[fracz]

I'm submitting a feature request

• What is the expected behavior?
  One should be able to specify route options (like trigger or replace) directly in the view. For example:

<a route-href="route: user/details; params.bind: {id: user.id}; options.bind: {replace: true}">Link</a>

Related SO question

• What is the motivation / use case for changing the behavior?
  I want different url for each tab on the page but I don't want to force the user to click many times the "Back" button in order to get out of the view.

• Does it exists in other libraries?
  Yes. Angular UI Router has an ui-sref-opts that adds such options directly to the element. Example:

<a ui-sref="userDetails({id: user.id})" ui-sref-opts="{replace: true}">Link</a>

• What have I tried
  The obvious solution (as suggested in SO question) is not to use route-href at all but delegate the route instruction to the view model, i.e.:

<a click.delegate="goToRoute()"></a>

goToRoute() {
   this.route.navigateToRoute('myRoute', { id:'someId' }, { replace: true });
}

I don't like this solution because it does not work with middle-click (i.e. "open in new tab").

I have triedto figure out something with additional custom attribute (say route-href-options). It should hijack the click, read the href of the element and then use the router to navigate with options. However, I am unable to do the first part with "hijacking". Even if i set onclick="return false" on the element, it is still handled with aurelia router and the view changes. Tried also with event.preventDefault(). This is what I have ended with (does not work!).

import {autoinject} from "aurelia-dependency-injection";
import {Router} from "aurelia-router";
import {customAttribute} from "aurelia-templating";

@autoinject
@customAttribute("route-href-options")
export class RouteHrefOptionsCustomAttribute {
  private $element: JQuery;

  constructor(element: Element, private router: Router) {
    this.$element = $(element);
  }

  bind() {
    this.$element.on('click', this.handleClickWithOptions);
  }

  unbind() {
    this.$element.off('click', this.handleClickWithOptions);
  }

  handleClickWithOptions = (event: Event) => {
    event.preventDefault();
    this.router.navigate(this.$element.attr('href'), {replace: true});
  };
}

[Alexander-Taran]

Stale

you can add route-href and a click.delegate=something($event)
check for middle button or ctrl.key state and if any, just return true,
otherwise router.navigate()