在模板中將包含javascript的文本綁定到innerHTML

Question

對於metro樣式的應用程序，在Windows 8中，我有一個文章列表，我將其傳遞到翻轉視圖控件。每篇文章都有一個包含javascript的HTML描述文本。我知道我們必須使用此功能不安全的內容加載到innerHTML的：

var someElement = document.getElementById('someElementID'); 
MSApp.execUnsafeLocalFunction(
function() { someElement.innerHTML = '<div onclick="console.log(\"hi\");">hi</div>' } 
); 

但我怎麼能做到這一點時，我的innerHTML屬性是在模板中？

這裏是我的模板：

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> 
<div class="itemDetail fragment"> 
    <header aria-label="Header content" role="banner"> 
<!--  <button class="win-backbutton" aria-label="Back" disabled></button>--> 
     <h1 class="titlearea win-type-ellipsis"> 
      <span class="pagetitle"></span> 
     </h1> 
    </header> 
    <section aria-label="Main content" role="main"> 
     <article> 
      <img class="article-image" src="#" style="width: 300px; height: 200px;" data-win-bind="src: urlImage; alt: title" /> 
      <div class="item-content" data-win-bind="innerHTML: description"></div> 
     </article> 
    </section> 
    </div> 
    </div> 

此flipVIew：

<div id="basicFlipView" 
data-win-control="WinJS.UI.FlipView" 
     data-win-options="{itemTemplate:select('#ItemTemplate')}"> 
</div> 

，這裏是我如何把它裝：

 var dataControl = document.getElementById("basicFlipView").winControl; 
     dataControl.itemDataSource = dataList.dataSource; 
     dataControl.currentPage = myState.index; 

非常感謝您的幫助

編輯：A s Dominic Hopton建議我使用WinJS.Binding.initializer。這是一種非常複雜的綁定方式。我已經這樣做了，但它不能正常工作。你看到一些錯誤：

var toUnsafeHTML = WinJS.Binding.initializer(
    function toUnsafeHTML(source, sourceProperty, dest, destProperty) { 


    function setUnsafeHTML() { 
     MSApp.execUnsafeLocalFunction(
     function() { dest.innerHTML = source.innerHTML } 
     ); 
    } 

    return WinJS.Binding.bind(source, { 
     innerHTML : setUnsafeHTML} 
    ); 

} 
); 

// 
// Binding initializers have to be public, so publish this out 
// via a namespace 
// 
WinJS.Namespace.define("TemplateControl", { 
    toUnsafeHTML: toUnsafeHTML 
}); 

，並在html：

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> 
<div class="itemDetail fragment"> 
    <header aria-label="Header content" role="banner"> 
<!--  <button class="win-backbutton" aria-label="Back" disabled></button>--> 
     <h1 class="titlearea win-type-ellipsis"> 
      <span class="pagetitle"></span> 
     </h1> 
    </header> 
    <section aria-label="Main content" role="main"> 
     <article> 
      <img class="article-image" src="#" style="width: 300px; height: 200px;" data-win-bind="src: urlImage; alt: title" /> 
      <div class="item-content" data-win-bind="innerHTML: TemplateControl.toUnsafeHTML"></div> 
     </article> 
    </section> 
    </div> 
    </div> 

它從未進入setUnsafeHTML功能...

Answer 1

我不知道這甚至有可能使用數據綁定，至少不使用我測試過的幾種技術中的任何一種。

這就是說...即使你可以做到這一點...如果你正在加載的文章來自互聯網，這將是一個非常糟糕的主意。

如果您從網絡加載腳本，您會暴露自己可能含有惡意代碼。存在這種限制的原因是爲了保護您（更重要的是，那些使用您的應用的用戶）從潛在的漏洞攻擊中受益。

如果您還沒有準備好，請閱讀execUnsafeLocalFunction的文檔，因爲這些細節爲何試圖從本地應用程序上下文中的網絡注入腳本是一個壞主意：

http://msdn.microsoft.com/en-us/library/windows/apps/Hh767331.aspx

參見（部分標題爲 「動態添加HTML」）：

http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx

和：

http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

其中列出了認爲安全或不安全的標籤，屬性和CSS屬性。

希望有幫助！