Я пытаюсь написать простой сайт, который перечисляет некоторый код и немного html, а также дает немного стиля и объяснения. Как мне добавить HTML-код на сервере в мой документ, чтобы Аурелия не пыталась его проанализировать? Я не использую модель представления, просто HTML.

Например, я использую Prism, чтобы выделить следующий код:

<span>${firstName}</span>

Но этот код выглядит так:

<span></span>

В моем документе. Могу ли я сказать Аурелии пропустить определенные части HTML? Чтобы усложнить вопрос, я включаю эти фрагменты кода из реальных исходных файлов (с использованием swig includes), поэтому я не могу добавлять атрибуты вручную; Я хочу оставить HTML "как есть". Однако я могу обернуть его в специальный элемент, но я бы не стал этого делать.

Что я пробовал (по мере того, как я пробую их, буду перечислять больше вариантов):

  • Оборачивание html в тег скрипта. Надеялась, что ауралия оставит это в покое, но никаких кубиков.
  • Выход из HTML

Любая помощь приветствуется.

1
Mr. Baudin 13 Май 2016 в 15:45

5 ответов

Лучший ответ

Нет, это невозможно. (16-05-2016)

Два других ответа - это обходные пути, и их следует использовать.

0
Community 23 Май 2017 в 12:00

Это довольно просто, если вы хотите использовать собственный элемент.

Вот подходящий настраиваемый элемент:

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

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

}

Вы просто используете это так

<aurelia-ignore>${firstName}</aurelia-ignore>
2
Samuel Jack 27 Апр 2018 в 15:58

Если строка HTML хранится в свойстве, вы можете использовать привязку innerhtml. Например:

Посмотреть модель

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

Просмотр

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

Или

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

Из документация:

Связывание с использованием атрибута innerhtml просто устанавливает свойство элемента innerHTML. Разметка не проходит через систему шаблонов Aurelia. Выражения привязки и требуемые элементы не будут оцениваться.

Всегда используйте очистку HTML. Мы предлагаем простой конвертер, который можно использовать. Рекомендуется использовать более полное средство очистки HTML, например sanitize-html.

1
qtuan 13 Май 2016 в 13:41

На данный момент кажется невозможным игнорировать парсинг определенных узлов DOM в aurelia. По крайней мере, это кажется маловероятным, поэтому я добавляю альтернативу смеси:

Я создал настраиваемый атрибут под названием 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 правильный ответ и мой.

0
Community 23 Май 2017 в 12:22

Вы можете просто использовать тот же синтаксис для вывода синтаксиса в виде строки, что я и делаю с той же Prism.

<span>${'${myCodeVar}'}</span>
0
rkever 8 Фев 2018 в 20:33