Aurelia - パススルールート

Question

Aureliaに関連するビューモデルを持たずに静的HTMLフラグメントをレンダリングすることは可能ですか？例えば、私は典型的なヘッダー、ボディー、フッターのレイアウトを持っています。体では、私はルータのビューを持っています。ボディーエリアでビューをレンダリングするときに、よくある質問（FAQs）のようなフッターのリンクがあります。

faqルートのルート設定を定義しようとすると、configは "moduleId："、 "redirect："、 "navigationStrategy："、または "viewPorts："のいずれかを指定する必要があります。

私が行っている一時的な回避策は、何もしないパススルービューモデルを作成することです。これにより、多数のパススルービューモデルクラスが生成されます。私は何か間違っていると確信しています。

このユースケースではオンラインヘルプが見つかりませんでした。どんな参考文献も高く評価されます。

Answer 1

inlineView("<your html here/>")のタイプのルートを探しているようですが、目的のルートに移動すると、router-view要素のHTMLが直接レンダリングされるようになります。

ViewModelがなければ、ActivationStrategyを呼び出すことができないため、aurelia-routerではこれを直接行うことはできません。 Aurelia-routerはcanActivate、activate、canDeactivate、deactivate、、に電話をかけたいとします。あなたは、単にプログラムでマークアップを定義したい、とあなたはマークアップの個々の部分のためのViewModelを宣言したくない場合は

しかし、その後、それはinlineViewStrategyとの組み合わせでcompose要素でかなりきれいに解決することができます。

このアプローチでは、現在のルートに基づいて正しいHTMLを取得し、そのHTMLをレンダリングするView/ViewModelペアが1つだけ必要です。 これを行うには他にも方法がありますが、AFAIKではこの方法には最小の配管工事が必要です。

もちろん、HTML /ルートペアを格納するオブジェクトと、それらのオブジェクトを格納/取得するサービスも必要です。

あなたは（物事を明確にするためにいくつかのコメントを含む）、ライブ作業バージョンをここに見ることができます： https://gist.run/?id=8c7e02ce1ee0e25d966fea33b826fe10

がapp.js

import { inject } from "aurelia-framework"; 
import { Router } from "aurelia-router"; 
import { FaqService } from "./faq-service"; 

@inject(Router, FaqService) 
export class App { 
    constructor(router, faqService) { 
    router.configure(config => { 
     config.map({ route: "", moduleId: "./empty" }); 
     config.map({ route: "faq/:route", moduleId: "./faq-detail" }); 
    }); 
    this.router = router; 
    this.faqService = faqService; 
    } 

    openFaq(item) { 
    this.router.navigate(`faq/${item.route}`); 
    } 
} 

app.html

<template> 
    <router-view></router-view> 
    <ul> 
    <li repeat.for="item of faqService.faqItems" click.delegate="openFaq(item)"> 
     ${item.title} 
    </li> 
    </ul> 
</template> 

empty.js（デフォルト空のルートのためにだけ都合）：

import { inlineView } from "aurelia-framework"; 
@inlineView("<template>no content</template>") 
export class Empty {} 

FAQ-service.js

import { singleton } from "aurelia-framework"; 

class FaqItem { 
    constructor(route, title, markup) { 
    this.route = route; 
    this.title = title; 
    this.markup = markup; 
    } 
} 

@singleton(false) 
export class FaqService { 
    constructor() { 

    this.faqItems = [ 
     new FaqItem("question-1", "Question 1", "<h4>Question 1</h4><p>Answer 1</p>"), 
     new FaqItem("question-2", "Question 2", "<h4>Question 2</h4><p>Answer 2</p>"), 
     new FaqItem("question-3", "Question 3", "<h4>Question 3</h4><p>Answer 3</p>") 
    ]; 
    } 

    getByRoute(route) { 
    return this.faqItems.find(i => i.route === route); 
    } 
} 

FAQ-detail.js

import { inject, InlineViewStrategy } from "aurelia-framework"; 
import { FaqService } from "./faq-service"; 

@inject(FaqService) 
export class FaqDetail { 
    constructor(service) { 
     this.service = service; 
    } 

    activate(param) { 

     let item = this.service.getByRoute(param.route); 
     this.viewStrategy = new InlineViewStrategy(`<template>${item.markup}</template>`) 
    } 
} 

FAQディテール。html

<template> 
    <compose view.bind="viewStrategy"></compose> 
</template>