Javascript 如何使用Aurelia动态增强HTML

我们将所有页面内容和博客帖子等存储在WordPress中，使用其API在我们的Aurelia应用程序中呈现数据。这是行之有效的

作者现在希望能够链接到弹出窗口，或使用博客文章中的

route href

或其他自定义Aurelia属性，但是使用

innerhtml.bind添加到页面的代码不会被Aurelia解析

我喜欢普通的
在Aurelia中“只起作用”——但我们有很多自定义属性（如
..
），作者无法使用这些属性

我们如何克服这一点

Edit:通过@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.. :/
            });
        }
    }
}

我是这样使用它的：


其中，
exampleContent
是一个从API调用中提取的字符串，它可能看起来像这样：
“登录”
，您的思路是正确的。没有什么需要考虑的


bindingContext
/
overrideContext
：这两个属性可以通过连接到自定义属性的
bind
生命周期来获得。因此，您可以将它们传递到
enhance
指令（只需要
bindingContext
，但传递两者更好，有助于遍历范围）.About
bindingContext
，99%将是您所在的视图模型，但您始终可以使用不同的对象。在这种情况下，
此
（自定义属性视图模型）是正确的

资源：取决于您希望如何使用TemplatingEngine.prototype.enhance返回的视图的资源范围。传递全局
Aurelia
实例的
resources
将不会产生它所在的自定义元素的本地资源范围。为了在属性注释在上，连接到属性的
创建的
生命周期，将第一个参数存储为
owningView
。这是包含属性的自定义元素的视图。然后您可以通过
owningView访问其资源。资源

清理：
模板生成引擎.prototype.enhance
返回一个
视图
，您还需要将此引用存储到属性生命周期中的
已分离
和
解除绑定

消毒


例如：

上面的要点是我为回答另一个有关论述的问题而制作的继承/增强示例。您可以查看
选择字段
，以查看更多示例。它与您在那里所做的类似

P/S：如果你对解决方案感到满意，不妨考虑写一篇博文/文章或在奥雷利亚语论坛上开一个话题来帮助其他人，他们也可能在那里挣扎。

更新示例：

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

当使用innerhtml时，“解析”是什么意思？如果作者在他们的博客文章或页面中使用自定义属性或元素，他们就不会被“解析”（可能是错误的词？）你需要的不是
innerhtml
，而是使用
TemplatingEngine
compose
/
增强
功能，这会很有帮助好吧，你有没有可能用一个例子来给出答案？我应该可以在这个周末或今天晚些时候写一个。如果你有急事，请看一下aurelia模板资源repo中的aurelia对话框或compose元素。哦，男人：P这对我来说太复杂了，哈哈：D我真的很感谢你的帮助，但老实说，我不知道如何修改我的代码使其基于该要点工作……很抱歉有点不对劲。B:PIt主要是关于
选择字段的de>。在其附加的生命周期中，您可以看到增强功能是如何使用的。是的，我找到了该文件并查看了您是如何使用
enhance（）的
method，但如果没有文档，我仍然发现很难将代码转换成对我有用的东西。你无法修改我问题中的代码以使其正常工作？我只是更新了答案。我可能你还需要做更多的工作，比如消毒、检查正确的时间安排等，但这可能会给你一些如何继续的想法对你来说，还是请考虑你的解决方案来帮助别人：“谢谢你帮我，我会尽快去做的。”