View 奥雷利亚-穿越路线

在Aurelia中是否可以在没有关联视图模型的情况下呈现静态HTML片段？例如，我有一个典型的页眉、正文和页脚布局。在正文中，我有路由器视图。页脚中有一组链接，如单击时常见问题解答，我希望在主体区域中呈现视图

当我尝试为faq路由定义路由配置时，该配置要求您必须指定一个“moduleId:”、“redirect:”、“navigationStrategy:”或“viewPorts:”

我的临时工作是创建一个不做任何事情的直通视图模型。这将产生一系列直通视图模型类。我肯定我做错了什么

---

我在网上找不到有关此用例的任何帮助。任何引用都将不胜感激。

您似乎正在寻找路由的

inlineView（“”

类型的功能，以便导航到目标路由将直接在router view元素中呈现HTML

这在aurelia router中是不可能直接实现的，因为如果没有ViewModel，就无法调用ActivationStrategy。Aurelia路由器想调用

canActivate

，

activate

，

canDeactivate

，

在某物上停用

但是，如果您只是想以编程方式定义标记，而不想为每个单独的标记块声明ViewModel，那么可以使用
compose
元素结合
inlineViewStrategy
巧妙地解决这个问题

使用这种方法，您只需要一个视图/视图模型对，它负责根据当前路由检索正确的HTML，然后呈现该HTML。
也有其他方法可以做到这一点，但这种方法所涉及的管道数量最少

当然，您还需要一个对象来存储HTML/路由对，以及一个服务来存储/检索这些对象

您可以在此处看到实时工作版本（包括一些澄清问题的注释）：

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>

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




${item.title}



empty.js（只是为了方便默认的空路由）：

import{inlineView}来自“aurelia框架”；
@inlineView（“无内容”）
导出类空{}

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

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>`)
    }
}

从“aurelia框架”导入{singleton}；
类常见问题解答项目{
构造函数（路线、标题、标记）{
this.route=路线；
this.title=标题；
this.markup=标记；
}
}
@单例（假）
导出类常见问题解答服务{
构造函数（）{
此项。常见问题解答项=[
新的FAQ项目（“问题1”、“问题1”、“问题1答案1
”，
新的FAQ项目（“问题2”、“问题2”、“问题2答案2
”，
新增常见问题解答（“问题3”、“问题3”、“问题3答案3
”）
];
}
getByRoute（路线）{
返回this.faqItems.find（i=>i.route==route）；
}
}

faq detail.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);
  }
}

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>`)
    }
}

从“aurelia框架”导入{inject，InlineViewStrategy}；
从“/faq服务”导入{faq服务}；
@注入（常见问题解答服务）
导出类常见问题解答详细信息{
建造师（服务）{
服务=服务；
}
激活（参数）{
让item=this.service.getByRoute（参数路由）；
this.viewStrategy=新的InlineViewStrategy（`${item.markup}`）
}
}

faq detail.html

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

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


感谢弗雷德的详细解释。它正在工作。其中一个不起作用的地方是项目列表是否来自一个自定义的纯HTML元素。在自定义元素中无法访问app.js中的openFaq。增强功能可能会派上用场，我正在尝试探索它。如果我成功了，我将发布一条说明。Enhanced在生命周期行为方面为您提供了一些额外的灵活性（和复杂性），但它无法解决此问题。它使用与InlineViewStrategy相同的底层视图编译器。自定义元素有自己的绑定上下文，因此不能从自定义元素中直接访问app.js上的属性/方法。您可以从custom元素中分派CustomEvent，并使用
.delegate
在app.html中侦听它。EventAggregator也是一个合适的人选。再次感谢Fred提供了一些关于如何最好地处理它的提示。以一些教程结束。。这里只是供参考。