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;
  }

如果,in 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的goInfo()进行导航.

我仍然想知道是否有可能点击一个div来使用只有属性的路由来导航,而不是单独的JS函数... EDIT2:可能相关:Aurelia delegate vs trigger:你怎么知道何时使用委托或触发器？:

只有冒泡的事件才能与Aurelia的委托绑定命令一起使用.模糊,聚焦,加载和卸载事件不会冒泡,因此您需要使用触发器绑定命令来订阅这些事件....
iOS不会在除a和 button,input和之外的元素上点击事件select.如果您订阅单击非输入元素(如a)div并且目标是iOS,请使用trigger binding命令.更多信息 在这里 和这里.

Answer 1

在route-href自定义属性生成一个href属性,它仅适用于<a>.它不适用于div,因为<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>