Как игнорировать html в aurelia

Question

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

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

<span>${firstName}</span> 

, но этот код заканчивается как:

<span></span> 

в моем документе. Есть ли способ, чтобы я сказал aurelia пропустить некоторые части html? Чтобы сделать этот вопрос сложнее, я включаю эти фрагменты кода из реальных исходных файлов (с использованием swig), поэтому я не могу вручную добавлять атрибуты; Я хочу сохранить html «как есть». Однако я могу обернуть его в пользовательский элемент, но я бы предпочел не делать этого.

То, что я попытался (перечислят больше вариантов, как я стараюсь их):

• Обертывание HTML в тэге. Надеянная ауралия оставила бы это в одиночку, но не играла в кости.
• Экранирование HTML

Любая помощь будет оценена.

Answer 1

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

Остальные два ответа являются обходными и должны использоваться.

• qtuan
• Mr. Baudin

Answer 2

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

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

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

Посмотреть

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

или

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

От documentation:

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

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

Answer 3

С этого момента кажется невозможным игнорировать разбор некоторых узлов 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

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

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