Aurelia - Passthrough路线

Question

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

当我尝试为faq路由定义路由配置时，配置期望其中一个必须指定“moduleId：”，“redirect：”，“navigationStrategy：”或“viewPorts：”。

我的临时工作是创建一个不做任何事情的直通视图模型。 这导致了一堆直通视图模型类。 我确信我做错了什么。

我在这个用例的网上找不到任何帮助。 任何参考资料将受到高度赞赏。

Answer 1

看起来您正在为inlineView("<your html here/>")寻找inlineView("<your html here/>")类型的功能，以便导航到目标路由将直接在router-view元素中呈现HTML。

aurelia-router无法直接实现这一点，因为如果没有ViewModel，则无法调用ActivationStrategy。 Aurelia-router想要调用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-detail.html

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