Aurelia - 直通路線

Question

是否有可能在Aurelia中呈現靜態HTML片段而沒有關聯的視圖模型？例如，我有一個典型的標題，正文，頁腳佈局。在正文中，我有路由器視圖。在點擊我想要在身體區域呈現視圖時，在頁腳中有一組鏈接。

當我嘗試爲faq路由定義路由配置時，配置需要指定一個「moduleId：」，「redirect：」，「navigationStrategy：」或「viewPorts：」。

我的臨時工作是創建一個無所作爲的直通視圖模型。這導致了一堆直通視圖模型類。我確信我做錯了什麼。

我在這個用例中找不到任何幫助。任何引用將不勝感激。

Answer 1

看起來您正在尋找inlineView("<your html here/>")類型的路由功能，以便導航到目標路由將直接在路由器視圖元素中呈現HTML。

這不是aurelia-router可以直接使用的，因爲如果沒有ViewModel，就不能調用ActivationStrategy。 Aurelia路由器想要撥打canActivate,activate,canDeactivate,deactivate對東西。但是，如果您只是想以編程方式定義標記，並且您不想爲每個單獨的標記聲明ViewModel，那麼可以用compose元素與inlineViewStrategy的組合來非常整齊地解決該問題。

使用這種方法，您只需要一個View/ViewModel對，它負責根據當前路線檢索正確的HTML，然後呈現該HTML。 還有其他方法可以做到這一點，但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>