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: how to navigate to route，另请参阅Error: ENOENT: no such file or directory src/aurelia-configuration.js · Issue #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执行/导航到路线？请注意，我宁愿不通过网址（如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: how do you know when to use delegate or trigger?：


只有泡泡的事件才能与Aurelia的委托绑定一起使用     命令。模糊，聚焦，加载和卸载事件不会起泡     你需要使用trigger binding命令来订阅这些     事件。 ...
    iOS不会在a以外的元素上冒泡点击事件，     button，input和select。如果您订阅了点击     像div这样的非输入元素并且正在定位iOS，请使用触发器     绑定命令。更多信息     here     和here。

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>

AureliaJS - 导航到div或JavaScript的路由？

1 个答案: