Question

我正在尝试编写一个简单的网站，其中列出了一些代码和一些HTML，并提供了一些样式和解释。如何在没有aurelia尝试解析此问题的情况下，如何在服务器上将HTML添加到我的文档中？我不使用视图模型，只使用纯HTML。

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

<span>${firstName}</span>

但是，此代码最终为：

<span></span>

在我的文件中。有没有办法让我告诉aurelia跳过html的某些部分？为了使问题更难，我从实际的源文件中包含这些代码片段（使用swig includes），因此我无法手动添加属性;我想保持html“按原样”。然而，我可以将它包装在自定义元素中，但我不愿意。

我尝试了什么（在尝试时会列出更多选项）：

将html包装在脚本标记中。希望auralia会留下那个，但没有骰子。
转义HTML

非常感谢任何帮助。

Answer 1

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

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

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

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

}

你只需像这样使用它

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

Answer 2

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

查看模型

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

查看

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

或

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

来自documentation：


使用innerhtml属性绑定只是设置元素   innerHTML属性。标记不会通过Aurelia的   模板系统。绑定表达式和require元素不会   被评估。

始终使用HTML清理。我们提供简单的转换器即可   使用。建议您使用更完整的HTML清理程序   as sanitize-html。

Answer 3

到目前为止，似乎无法忽略aurelia中某些DOM节点的解析。至少看起来不太可能，所以我添加了另一种选择：

我创建了一个名为 getContent 的自定义属性，它接受一个URL，检索HTML并将其插入到元素的innerHTML中。使用自定义元素，您可以扩展qtuan的答案并将innerHTML绑定到此“获取”的内容。

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无需正确注入内部脚本标记，只是为了保持整齐有序。

我打算将这个问题保持开放几天，并希望有人可以回答真正的问题，但现在有两种选择qtuan's正确的答案和我的。

Answer 4

不，不可能这样做。（16-05-2016）

另外两个答案是解决方法，应该使用。

Answer 5

您可以使用相同的语法将语法输出为字符串，这就是我使用相同的Prism。

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

如何忽略aurelia中的html

5 个答案: