AureliaJS - divまたはJavaScriptからのルートにナビゲートしますか？

Question

私はAurelia JSの学習を始めました。問題にぶつかりました。

私としてapp.jsの私のルートを持っている：mainpage.htmlで、私はこれを使用、場合

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

：

<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>要素からのルートに移動することは可能です。もしそうなら、どのように？

---

Iはまた、（Aurelia.io: how to navigate to route通り、Error: ENOENT: no such file or directory src/aurelia-configuration.js · Issue #64 · Vheissu/aurelia-configuration · GitHubをも参照）、JavaScriptから直接これを実行しようとしました。そう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()を見ることができます。

... 
{ 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に追加した：しかし、すぐに、私はaurelia-routing一部を追加すると、私が手

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

を...それでも私は、ファイルが見つからない」取得します」...どういうわけか、インポートはまだそのファイルがnode_modules/aurelia-router/

だから、2番目の質問にされている場合でも、src/内のファイルを見つけることを主張している：

• JavaScriptからルートを実行/ナビゲートするにはどうすればよいですか？私はむしろ（location.assign('#/info');のように）URL経由で動作しません、注意してください

EDIT：ちょうど 私は別の場所からコピーしmainpage.jsコードスニペットのように、それはもうaurelia-routingと呼ばれていませんがわかった - しかし、それaurelia.jsが示すように、 は現在aurelia-routerと呼ばれています。だから、僕は import { Router } from 'aurelia-router'; にmainpage.jsでインポートを変更 - そして、あなたはaurelia.jsでカーリー かっこ{（"name": "aurelia-router", ...一部）との間に挿入する必要はありません - mainpage.jsのgoInfo()ナビゲーションのために 、その後this.router.navigateToRoute("info");作品を。

ではなく、別 JS機能... EDIT2で、属性だけでルーティングを使用して ナビゲートするためのdivのクリックを得ることが可能であるならば、私はまだ知りたい：おそらく関連：Aurelia delegate vs trigger: how do you know when to use delegate or trigger?：

Aureliaのデリゲートバインドの コマンドでバブルのイベントのみを使用できます。 blur、focus、load、unloadイベントはバブルではありません。 これらの イベントにサブスクライブするには、trigger bindingコマンドを使用する必要があります。 ...
a、 button、input、select以外の要素では、iOSでバブルイベントが発生しません。 divのような非入力要素 をクリックして購読していて、iOSをターゲットにしている場合は、 というトリガーコマンドを使用します。詳細情報 here およびhere

Answer 1

route-hrefカスタム属性は、<a>のために働くhref属性を生成します。 <div href="/page"></div>は有効なマークアップではないため、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>