用aurelia编写html文件

我想在android中实现类似于“包含”的功能，但在aurelia中：

如何将普通html文件内容注入我的视图，在父视图中评估绑定，而不使用自定义元素？

---

根据文档，绑定innerhtml是不够的，因为绑定表达式被绕过。

正如Ashley已经说过的，使用

元素将与现有HTML文件一起工作，并将继承父上下文

如果您想动态地（从文件、数据库或以编程方式构建）编写HTML，那么使用

ViewCompiler

将为您提供最佳的性能和灵活性，因为与aurelia在内部构建自定义元素的方式相比，这比

compose

少一层

我在这里对一个不同（但相关）的问题给出了类似的回答：

您可以使用

text

插件将HTML文件作为文本加载到变量中，然后将其传递给ViewCompiler。我有一个自定义元素，就性能而言，它可能不比

compose

好，但它确实允许在使用原始html作为输入时进行更多控制，并且您可以根据需要针对您的情况进行自己的性能优化：

import * as markup from "text!./your-element.html";

export class SomeViewModel {
    constructor() {
        this.markup = markup;
    }
}

以及以下观点：

<template>
    <dynamic-html html.bind="markup"></dynamic-html>
</template>

为完整起见，以下是我封装ViewCompiler的自定义元素：

import {
    customElement,
    TaskQueue,
    bindable,
    ViewCompiler,
    ViewSlot,
    View,
    ViewResources,
    Container,
    ViewFactory,
    inlineView,
    inject,
    DOM
} from "aurelia-framework";

@customElement("dynamic-html")
@inlineView("<template><div></div></template>")
@inject(DOM.Element, TaskQueue, Container, ViewCompiler)
export class DynamicHtml {
    @bindable()
    public html: string;

    public element: HTMLElement;

    private tq: TaskQueue;
    private container: Container;
    private viewCompiler: ViewCompiler;

    private runtimeView: View;
    private runtimeViewSlot: ViewSlot;
    private runtimeViewFactory: ViewFactory;
    private runtimeViewAnchor: HTMLDivElement;

    constructor(element, tq, container, viewCompiler) {
        this.element = <HTMLElement>element;
        this.tq = tq;
        this.container = container;
        this.viewCompiler = viewCompiler;
    }

    public bindingContext: any;
    public overrideContext: any;
    public bind(bindingContext: any, overrideContext: any): void {
        this.bindingContext = bindingContext;
        this.overrideContext = overrideContext;

        if (this.html) {
            this.htmlChanged(this.html, undefined);
        }
    }

    public unbind(): void {
        this.disposeView();

        this.bindingContext = null;
        this.overrideContext = null;
    }

    public needsApply: boolean = false;
    public isAttached: boolean = false;
    public attached(): void {
        this.runtimeViewAnchor = <HTMLDivElement>this.element.firstElementChild;

        this.isAttached = true;
        if (this.needsApply) {
            this.needsApply = false;
            this.apply();
        }
    }

    public detached(): void {
        this.isAttached = false;

        this.runtimeViewAnchor = null;
    }

    private htmlChanged(newValue: string, oldValue: void): void {
        if (newValue) {
            if (this.isAttached) {
                this.tq.queueMicroTask(() => {
                    this.apply();
                });
            } else {
                this.needsApply = true;
            }
        } else {
            if (this.isApplied) {
                this.disposeView();
            }
        }
    }

    private isApplied: boolean = false;
    private apply(): void {
        if (this.isApplied) {
            this.disposeView();
        }

        this.compileView();
    }

    private disposeView(): void {
        if (this.runtimeViewSlot) {
            this.runtimeViewSlot.unbind();
            this.runtimeViewSlot.detached();
            this.runtimeViewSlot.removeAll();
            this.runtimeViewSlot = null;
        }

        if (this.runtimeViewFactory) {
            this.runtimeViewFactory = null;
        }

        if (this.runtimeView) {
            this.runtimeView = null;
        }

        this.isApplied = false;
    }

    private compileView(): void {
        this.runtimeViewFactory = createViewFactory(this.viewCompiler, this.container, this.html);

        this.runtimeView = createView(this.runtimeViewFactory, this.container);

        this.runtimeViewSlot = createViewSlot(this.runtimeViewAnchor);
        this.runtimeViewSlot.add(this.runtimeView);
        this.runtimeViewSlot.bind(this.bindingContext, this.overrideContext);
        this.runtimeViewSlot.attached();

        this.isApplied = true;
    }

}

function createViewFactory(viewCompiler: ViewCompiler, container: Container, html: string): ViewFactory {
    if (!html.startsWith("<template>")) {
        html = `<template>${html}</template>`;
    }
    let viewResources: ViewResources = container.get(ViewResources);
    let viewFactory = viewCompiler.compile(html, viewResources);
    return viewFactory;
}

function createView(viewFactory: ViewFactory, container: Container): View {
    let childContainer = container.createChild();
    let view = viewFactory.create(childContainer);
    return view;
}

function createViewSlot(containerElement: Element): ViewSlot {
    let viewSlot = new ViewSlot(containerElement, true);
    return viewSlot;
}

导入{
自定义元素，
任务队列，
可装订的，
视图编译器，
视窗，
看法
查看资源，
集装箱，
观景工厂，
inlineView，
注射
多姆
}来自“奥雷利亚框架”；
@customElement（“动态html”）
@inlineView（“”）
@注入（DOM.Element、TaskQueue、容器、ViewCompiler）
导出类DynamicHtml{
@可绑定的（）
公共html:string；
公共元素：HTMLElement；
专用tq：任务队列；
私人集装箱：集装箱；
私有视图编译器：视图编译器；
私有运行时视图：视图；
私有运行时ViewSlot:ViewSlot；
私有运行时ViewFactory:ViewFactory；
私有runtimeViewAnchor:HtmlLevel；
构造函数（元素、tq、容器、视图编译器）{
this.element=元素；
this.tq=tq；
this.container=容器；
this.viewCompiler=viewCompiler；
}
公共绑定上下文：任何；
公共文本：任何；
公共绑定（bindingContext:any，overrideContext:any）：void{
this.bindingContext=bindingContext；
this.overrideContext=overrideContext；
if（this.html）{
this.htmlChanged（this.html，未定义）；
}
}
public unbind（）：void{
这个；
this.bindingContext=null；
this.overrideContext=null；
}
public needsApply:boolean=false；
public isAttached:boolean=false；
公共附件（）：无效{
this.runtimeViewAnchor=this.element.firstElementChild；
this.isAttached=true；
如果（这是必要的）{
this.needsApply=false；
这个。apply（）；
}
}
公共分离（）：无效{
this.isAttached=false；
this.runtimeViewAnchor=null；
}
私有htmlChanged（newValue:string，oldValue:void）：void{
如果（新值）{
如果（本文件已附加）{
this.tq.queueMicroTask（（）=>{
这个。apply（）；
});
}否则{
这是真的；
}
}否则{
如果（本条适用）{
这个；
}
}
}
private isApplied:boolean=false；
private apply（）：void{
如果（本条适用）{
这个；
}
this.compileView（）；
}
private disposeView（）：void{
if（此.runtimeViewSlot）{
这个.runtimeViewSlot.unbind（）；
this.runtimeViewSlot.detached（）；
this.runtimeViewSlot.removeAll（）；
this.runtimeViewSlot=null；
}
if（此.runtimeViewFactory）{
this.runtimeViewFactory=null；
}
if（this.runtimeView）{
this.runtimeView=null；
}
this.isApplied=false；
}
私有compileView（）：void{
this.runtimeViewFactory=createViewFactory（this.viewCompiler、this.container、this.html）；
this.runtimeView=createView（this.runtimeViewFactory，this.container）；
this.runtimeViewSlot=createViewSlot（this.runtimeViewAnchor）；
this.runtimeViewSlot.add（this.runtimeView）；
this.runtimeViewSlot.bind（this.bindingContext，this.overrideContext）；
这个.runtimeViewSlot.attached（）；
this.isApplied=true；
}
}
函数createViewFactory（viewCompiler:viewCompiler，container:container，html:string）：ViewFactory{
如果（！html.startsWith（“”）{
html=`${html}`；
}
让viewResources:viewResources=container.get（viewResources）；
让viewFactory=viewCompiler.compile（html，viewResources）；
返回工厂；
}
函数createView（viewFactory:viewFactory，容器：容器）：视图{
让childContainer=container.createChild（）；
让view=viewFactory.create（childContainer）；
返回视图；
}
函数createViewSlot（containerElement:Element）：ViewSlot{
让viewSlot=新的viewSlot（containerElement，true）；
返回视窗；
}

正如Ashley所说，使用

元素将与现有HTML文件一起工作，并将继承父上下文

如果您想动态地（从文件、数据库或以编程方式构建）编写HTML，那么使用

ViewCompiler

将为您提供最佳的性能和灵活性，因为与aurelia在内部构建自定义元素的方式相比，这比

compose

少一层

我在这里对一个不同（但相关）的问题给出了类似的回答：

您可以使用

文本
插件加载HTML