AureliaJS - переходить по маршруту из div или из JavaScript?

Question

Я только начал изучать Aurelia JS и столкнулся с проблемой.

У меня есть маршруты в app.js как:

  configureRouter(config, router){
    config.title = 'TEST';
    config.map([
      { route: ['','main'], name: 'main', moduleId: './mainpage', nav: true, title:'Main' },
      { route: 'info',     name: 'info', moduleId: './info', nav: true, title:'Info' }
    ]);

    this.router = router;
  }

Если в mainpage.htmlЯ использую это:

<div class="button" route-href="route: info;">Go to Info</div>

... тогда ничего не происходит; если я также добавлю:

<div class="button" route-href="route: info;" click.trigger="route: info;">Go to Info</div>

... тогда я получаю крах au run, Однако, если я использую <a> элемент вместо:

<a route-href="route: info;"><div class="button">Go to Info</div>

... тогда маршрутизация / навигация по клику работает нормально - но мой стиль CSS полностью испорчен; и я бы предпочел не стиль <a> специально для этого.

Итак, первый вопрос:

• Можно ли перейти к маршруту из <div> элемент; и если да, то как?

---

Я также попытался выполнить это непосредственно из JavaScript (согласно Aurelia.io: как перейти к маршруту, см. Также Ошибка: ENOENT: нет такого файла или каталога src/aurelia-configuration.js · Проблема № 64 · Vheissu / aurelia-configuration · GitHub); так в mainpage.html У меня есть это:

<div class="button" click.trigger="goInfo()">Go to Info</div>

И в mainpage.js

import { Router } from 'aurelia-routing';

//~ @inject(Router)
export class Main {
  static inject() { return [Router]; }

  constructor(router) {
    this.router = router;
  }

  goInfo() {
    alert("Go Info");
  }
}

@inject(Router) терпит неудачу с чем-то вроде inject не найден, поэтому я использовал static.. синтаксис как в учебнике.

Пока у меня нет import { Router } from 'aurelia-routing'; часть, тогда я могу видеть goInfo() срабатывает при нажатии кнопки div и показывает предупреждение. Но как только я добавлю aurelia-routing часть, я получаю:

...
{ uid: 11,
  name: 'writeBundles',
  branch: false,
  error:
   { [Error: ENOENT: no such file or directory, open '[full project path]/src/aurelia-routing.js']
     errno: -2,
     code: 'ENOENT',
...

... и я даже добавил к aurelia_project/aurelia.json:

...
        "dependencies": [
...
          "aurelia-route-recognizer",
          "aurelia-router",
          {
            "name": "aurelia-router",
            "path": "../node_modules/aurelia-router/dist/commonjs",
            "main": "index"
          },
          "aurelia-task-queue",
...

... но все равно я получаю "файл не найден"... Почему-то импорт все еще настаивает на поиске файла в src/даже если этот файл находится в node_modules/aurelia-router/

Итак, второй вопрос:

• Как я могу выполнить / перейти к маршруту из JavaScript? Обратите внимание, я бы не хотел работать через URL (как в location.assign('#/info');)

РЕДАКТИРОВАТЬ: Только что узнал, что это не называется aurelia-routing больше, как в mainpage.js фрагмент кода, который я скопировал из другого места - но он называется aurelia-router сейчас, как aurelia.js показывает. Так что я просто изменил импорт в mainpage.js в import { Router } from 'aurelia-router'; - и тогда вам не понадобится вставка между фигурными скобками { ("name": "aurelia-router",... часть) в aurelia.js - а потом this.router.navigateToRoute("info"); работает в mainpage.js"s goInfo() для навигации.

Я все еще хотел бы знать, возможно ли получить щелчок по элементу div для навигации, используя маршрутизацию только с атрибутом, а не с отдельной функцией JS... EDIT2: возможно, актуально: делегат Aurelia против триггера: откуда вы знаете когда использовать делегат или триггер?:

Только события, которые всплывают, могут использоваться с командой привязки делегата Aurelia. События размытия, фокусировки, загрузки и выгрузки не всплывают, поэтому вам необходимо использовать команду привязки триггера для подписки на эти события....
iOS не отображает события щелчка на элементах, кроме a, button, input а также select, Если вы подписываетесь, чтобы нажать на элемент без ввода, как div и нацелены на iOS, используйте команду привязки триггера. Больше информации здесь и здесь.

Answer 1

route-href пользовательский атрибут генерирует href атрибут, который работает только для <a>, Это не работает для divs, потому что <div href="/page"></div> недопустимая разметка

Чтобы решить эту проблему, вы можете создать свой собственный атрибут. Что-то вроде этого:

import { customAttribute, bindable, inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@inject(Element, Router)
@customAttribute('go-to-route')
export class GoToRoute {

  @bindable route;
  @bindable params;

  constructor(element, router) {
    this.element = element;
    this.router = router;
  }

  attached() {
    this.element.addEventListener("click", () => {
      this.router.navigateToRoute(this.route, this.params);
    });
  }
}

Использование:

<template>
  <require from="./go-to-route"></require>
  <div go-to-route="route: somewhere; params.bind: someParams">Go To Somewhere</div>
</template>