자바 스크립트가 들어있는 텍스트를 템플릿의 innerHTML에 바인딩

Question

메트로 스타일 앱의 경우 Windows 8에서 플립 뷰 컨트롤에 전달한 기사 목록이 있습니다. 각 기사에는 자바 스크립트가 포함 된 HTML의 설명 텍스트가 있습니다.

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

하지만 난 내 innerHTML 속성 템플릿 내에있을 때 것을 어떻게 얻을 수 있습니다 우리가 innerHTML을 안전하지 않은 내용을로드하기 위해이 기능을 사용해야 알아? 이 flipVIew에 대한

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

: 여기

내 템플릿입니다

<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 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 속성을 나열합니다.

희망 하시겠습니까?