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>