如何忽略aurelia中的html

我正在嘗試編寫一個簡單的網站，其中列出了一些代碼和一些html，並提供了一些樣式和解釋。如果沒有aurelia試圖解析這個問題，我如何在服務器上添加HTML到我的文檔？我不使用視圖模型，只是簡單的HTML。如何忽略aurelia中的html

例如，我使用棱鏡突出以下代碼：

<span>${firstName}</span>

但是，這個代碼最終爲：

<span></span>

我的文檔中

。有沒有辦法讓我告訴aurelia跳過html的某些部分？爲了使問題更難，我將這些代碼從實際的源文件中加入（使用swig includes），所以我不能手動添加屬性;我想保持html「原樣」。然而，我可以將它包裝在一個自定義元素中，但我不想。

我已經試過（將列出更多的選擇，因爲我試戴）：

包纏在HTML腳本標記。希望auralia會獨自離開，但沒有骰子。
逃離HTML

任何幫助將非常感激。

來源

2016-05-13 Mr. Baudin

再次讀你的問題，我可能誤解了。看起來你正在討論一些服務器端包含，之後將生成的HTML發送到客戶端並由Aurelia處理。 – qtuan

是的，我剛剛在你的回答下面的評論中試圖澄清它。 –

對不起，我沒有比使用自定義元素更好的想法，這不是您的選擇。 – qtuan

不，這是不可能的。（16-05-2016）

另外兩個答案是解決方法，應該使用。

來源

2016-05-16 06:25:56

如果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。

來源

2016-05-13 13:41:08 qtuan

謝謝你的答案，但這不完全是我的用例。我有一個很大的html，在這個html裏面有一個像{％include'my-file.html'％}這樣用swig（在服務器上）呈現的東西。此內容位於

...

之內，因此無法通過innerhtml將其綁定。 –

截至此刻，似乎無法忽略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正確的答案和我的。

來源

2016-05-14 04:43:54

感謝您分享您的解決方案！我很擔心我誤導了使用innerhtml搜索的解決方案。回想一下，如果你想要顯示一個字符串' $ {firstName}'，那就意味着* BOTH *：字符串應該被HTML轉義，而Aurelia不應該編譯它。事實上，這可以通過簡單的字符串內插來實現，例如'

${htmlProperty}

'。如果你已經有了這個解決方案，也許HTML轉義已經在服務器端完成了。 – qtuan

Tbh，我只是將文件加載爲文本，所以不會像'application/html'那樣（糾正我，如果我錯了）會自動轉義html。這個解決方案應該「正常」與正確的服務器端框架。 –

您可以只使用同樣的語法來輸出語法爲一個字符串，這是我與同棱鏡做。

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

來源

2018-02-08 20:33:24 rkever

如何忽略aurelia中的html

回答

相關問題