如何在 aurelia 中忽略 html

Question

我正在尝试编写一个简单的网站，其中列出了一些代码和一些 html 并提供了一些样式和解释。如何将服务器上的 HTML 添加到我的文档中，而 aurelia 不会尝试解析它？我不使用视图模型，只是简单的 HTML.

例如，我正在使用 Prism 突出显示以下代码：

<span>${firstName}</span>

但是，此代码最终为：

<span></span>

在我的文档中。有没有办法告诉 aurelia 跳过 html 的某些部分？为了让问题更难，我从实际的源文件中包含了这些代码片段（使用 swig includes），所以我不能手动添加属性；我想保留 html "as is"。然而，我可以将它包装在一个自定义元素中，但我不想这样做。

我尝试过的（我会在尝试时列出更多选项）：

将 html 包装在脚本标记中。希望 auralia 不会管它，但没有骰子。
逃离 HTML

如有任何帮助，我们将不胜感激。

Answer 1

如果HTML字符串存储在属性中，可以使用innerhtml绑定。例如：

查看模型

this.htmlProperty = '<span>${firstName}</span>';

查看

<div innerhtml.bind="htmlProperty | sanitizeHTML"></div>

或

<div innerhtml="${htmlProperty | sanitizeHTML}"></div>

来自documentation：

Binding using the innerhtml attribute simply sets the element's innerHTML property. The markup does not pass through Aurelia's templating system. Binding expressions and require elements will not be evaluated.

Always use HTML sanitization. We provide a simple converter that can be used. You are encouraged to use a more complete HTML sanitizer such as sanitize-html .

Answer 2

截至目前，似乎无法忽略 aurelia 中某些 DOM 节点的解析。至少它看起来不太可能，所以我添加了一个替代方案：

我创建了一个名为 getContent 的自定义属性，它采用 URL，检索 HTML 并将其插入内部 HTML 的元素。使用自定义元素，您可以扩展 qtuan 的答案并将内部 HTML 绑定到此 "fetched" 内容。

import {customAttribute, inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';

@customAttribute('get-content')
@inject(Element, HttpClient)
export class GetContentCustomAttribute {
    constructor(element, http) {
        this.element = element;

        http.configure(config => {
            config
                .useStandardConfiguration();
        });

        this.http = http;
    }

    valueChanged(newValue) {
        var self = this;

        self.http.fetch(newValue)
            .then(response => {
                var reader = response.body.getReader();
                var decoder = new TextDecoder();
                var s = reader.read().then(utf => {
                    var html = decoder.decode(utf.value);
                    self.element.innerHTML = html;
                })

            });
    }
}

您可以像这样使用这个元素：

<div class="container">
    <h3>SWIG include example</h3>
    <pre class="line-numbers">
        <code class="language-markup">
            <script type="prism-html-markup"
                    get-content="/modules/components/lists/templates/list.html">
            </script>
        </code>
    </pre>
</div>

html 不需要内部脚本标签就可以正确注入，它只是为了让事情井然有序。

我将这个问题再开放几天，希望有人能回答真正的问题，但现在有两个选择正确答案和我的。

Answer 3

不，这是不可能的。 (16-05-2016)

其他两个答案是解决方法，应该使用。

Answer 4

您可以只使用完全相同的语法将语法输出为字符串，这就是我在同一个 Prism 上所做的。

<span>${'${myCodeVar}'}</span>

Answer 5

如果您愿意使用自定义元素，这将非常简单。

这里有一个合适的自定义元素：

import {  noView, processContent } from "aurelia-framework";

@noView()
@processContent(false)
export class AureliaIgnoreCustomElement {

}

你就这么用

<aurelia-ignore>${firstName}</aurelia-ignore>

如何在 aurelia 中忽略 html

How to ignore html in aurelia

html

aurelia