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: 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的路线？请注意，我宁愿不通过URL的工作（如location.assign('#/info');）

编辑：刚刚发现它不叫aurelia-routing了，因为在 这是我从其他地方复制的mainpage.js代码片段 - 但它 现在称为aurelia-router，如aurelia.js所示。所以，我只是 改变了进口在mainpage.js到import { Router } from 'aurelia-router'; - 然后你不需要花aurelia.js括号 {（在"name": "aurelia-router", ...一部分）之间的插入 - 然后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>