如何忽略 aurelia 中的 html答案

【问题标题】：How to ignore html in aurelia如何忽略 aurelia 中的 html
【发布时间】：2018-04-27 23:58:51
【问题描述】：

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

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

<span>${firstName}</span>

但是，这段代码最终是：

<span></span>

在我的文档中。有没有办法让我告诉 aurelia 跳过 html 的某些部分？为了使问题更难，我包含了来自实际源文件的这些代码（使用 swig 包含），因此我无法手动添加属性；我想保持 html“原样”。但是，我可以将其包装在自定义元素中，但我不希望这样做。

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

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

任何帮助将不胜感激。

【问题讨论】：

再次阅读您的问题，我可能误解了。看起来您在谈论一些服务器端包含，然后生成的 HTML 被发送到客户端并由 Aurelia 处理。
是的，我只是试图在您的答案下方的评论中澄清它。
对不起，我没有比使用自定义元素更好的主意了，这不是你的选择。

标签： html aurelia

【解决方案1】：

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

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

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

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

}

你只是这样使用它

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

【讨论】：

【解决方案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 sanitizer，例如作为 sanitize-html 。

【讨论】：

感谢您的回答，但这不完全是我的用例。我有一大堆 html，在这个 html 里面我有类似 {% include 'my-file.html' %} 的东西，它是用 swig 呈现的（在服务器上）。此内容在
```
...
```
内，因此无法通过 innerhtml 绑定此内容。

【解决方案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 不需要内部 script 标签，它只是为了让事情井井有条。

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

【讨论】：

感谢分享您的解决方案！我担心我误导了您使用 innerhtml 搜索的解决方案。回想一下，如果您想要按原样显示字符串 <span>${firstName}</span>，这意味着 BOTH：字符串应该是 HTML 转义的，并且 Aurelia 不应该编译它。事实上，这可以通过简单的字符串插值来实现，例如<div>${htmlProperty}</div>。如果您已经有此解决方案，则可能是在服务器端完成了 HTML 转义。
Tbh，我只是将文件作为文本加载，而不是像 application/html 那样（如果我错了，请纠正我）自动转义 html。此解决方案应该与正确的服务器端框架“正常工作”。

【解决方案4】：

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

其他两个答案是变通方法，应该使用。

【讨论】：

【解决方案5】：

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

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

【讨论】：