javascript - 如何使用 Aurelia 动态增强 HTML

Question

我们将所有页面内容和博客文章等存储在 WordPress 中，使用其 API 在我们的 Aurelia 应用程序中呈现数据。这很好用；

<div class="excerpt" innerhtml.bind="post.excerpt.rendered"></div>

作者现在希望能够链接到弹出窗口或使用 route-href或他们博客文章中的其他自定义 Aurelia 属性，但是使用 innerhtml.bind 添加到页面的代码不会被 Aurelia 解析。

我喜欢正常的 <a href="...">在 Aurelia 中“正常工作”——但我们有很多自定义属性(例如 <button popup="name-of-popup">...</button>，作者无法使用。

我们如何克服这个问题？

编辑:根据@bigopon 的评论，我已经开始做某事，但仍然无法完全实现。要么我不擅长搜索，要么 TemplatingEngine.enhance() 上缺少文档方法，但我尝试创建这样的自定义属性:

import {Aurelia, inject, TemplatingEngine} from 'aurelia-framework';

@inject(Element, Aurelia, TemplatingEngine)
export class AureliaEnhanceCustomAttribute {
    constructor (el, aurelia, templatingEngine) {
        this.el = el;
        this.aurelia = aurelia; // NOTE: I've never done this before - is it even correct?
        this.templatingEngine = templatingEngine;
    }

    attached () {
        this.el.innerHTML = this.value;

        // NOTE: Without checking for this we get an endless loop of attached() calls
        if (!this.el.classList.contains('au-target')) {
            this.templatingEngine.enhance({
                element: this.el,
                container: Aurelia.container, // NOTE: I'm guessing here
                resources: Aurelia.resources, // NOTE: Same here, but I need all my global resources to be available inside the enhanced element too
                bindingContext: {} // NOTE: Not sure what to pass in here at all.. :/
            });
        }
    }
}

我是这样使用它的:

<div aurelia-enhance.bind="exampleContent"></div>

在哪里exampleContent是从 API 调用中获取的字符串，看起来像这样:'<my-custom-element></my-custom-element><button my-custom-attribute="some-value">Log in</button>' .

Answer 1

您走在正确的轨道上。需要考虑的事情很少

• bindingContext/overrideContext:这两个你可以通过 Hook 自定义属性的 bind 生命周期来获得。因此，您将能够将它们传递给 enhance 指令(只需要 bindingContext，但同时传递两者更好，有助于遍历范围)。关于 bindingContext，99% 它将是您所在的 View 模型，但您始终可以使用不同的对象。在这种情况下，this(自定义属性 View 模型)是正确的。

• 资源:取决于您希望TemplatingEngine.prototype.enhance 返回的 View 的资源范围如何。传递全局 Aurelia 实例的 resources 不会产生它所在的自定义元素的本地资源范围。为了与属性注释的元素具有相同的资源， Hook 在属性的 created 生命周期中，将第一个参数存储为 owningView。这是包含属性的自定义元素的 View 。然后就可以通过owningView.resources

访问它的资源了

• 清理:TemplatingEngine.prototype.enhance返回一个View，你需要将这个引用存储到detached和在你的属性生命周期中也取消绑定(bind)

• sanitizer

一个例子:https://gist.run/?id=9dd32bc8a772526ae527f593e26b275b

上面的要点是我为了回答Discourse上的另一个问题而做的一个继承/增强的例子。您可以查看 select-field 以查看更多示例。这与您在那里所做的类似。

P/S:如果您对解决方案感到满意，可以考虑写一篇博文/文章或在 Aurelia Discourse 论坛上开一个主题来帮助其他可能也在那里遇到困难的人。

---

更新示例:

import {Aurelia, inject, TemplatingEngine, DOM} from 'aurelia-framework';

@inject(Element, TemplatingEngine)
export class AureliaEnhanceCustomAttribute {
    constructor (el, aurelia, templatingEngine) {
        this.el = el;
        this.templatingEngine = templatingEngine;
    }

    // Custom attribute doesn't have its own view
    // Only the view of the custom element that owns it
    created(owningElementView, thisView) {
        this.owningElementView = owningElementView;
    }

    bind(bindingContext, overrideContext) {
        this.bindingContext = bindingContext;
        this.overrideContext = overrideContext;
    }

    attached () {
        this.el.innerHTML = this.value;

        // NOTE: Without checking for this we get an endless loop of attached() calls

        if (!this.el.classList.contains('au-target')) {
            this.dynamicView = this. this.templatingEngine.enhance({
                element: this.el,
                // we have two choices here, either the container of owning element, or this attribute
                // Lets go with the element, since it propbably has everything we need
                container: this.owningElementView.container,
                // the resources has information about its parent,
                // So we just need the resources of the element containing this attribute
                resources: this.owningElementView.resources,
                // Or this.bindingContext (same)
                bindingContext: this,
                // this helps travel up
                overrideContext: this.overrideContext
            });
        }
    }

    detached() {
        this.dynamicView.detached();
    }

    unbind() {
        if (this.dynamicView) {
            this.dynamicView.unbind();
        }
    }
}