Question

对于Metro风格的应用程序，在Windows 8中，我有一个文章列表，我将其传递给翻转的View Control。每篇文章都有HTML格式的描述文本，其中包含javascript。我知道我们必须使用此函数将不安全的内容加载到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>

for 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;

非常感谢您的帮助

编辑：正如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的文档，因为它们详细说明为什么尝试在本地应用程序上下文中从Web注入脚本是个坏主意：

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属性。

希望有所帮助！

将包含javascript的文本绑定到模板中的innerHTML

1 个答案: