Windows 8/Metro UI數據綁定javascript

我正在創建一個應用程序使用JavaScript/HTML的Windows 8基本上顯示從HTML文件中拉出的文本。我使用data.js文件來組織組和組。其中一個屬性是「url」，它存儲了包含應用程序主要內容的html頁面的url。Windows 8/Metro UI數據綁定javascript

我想出了這個代碼來檢索從包含內容的HTML頁面的HTML代碼中顯示：

WinJS.UI.Fragments.renderCopy(url) 
        .done(function (fragment) { 
        return fragment; 
});

如何在data.js陣列中運行的每個項目的代碼並綁定數據以使內容來自HTML頁面，並且標題/標題來自data.js文件？

我很抱歉，如果我造成任何混淆。我將不勝感激任何幫助。

謝謝。

來源

2012-08-17 Kevin P

假設你想要堅持data.js的佈局，而不是創建你自己的數據類，我會使用自定義渲染器的列表視圖。

事情是這樣的......

var customRender = WinJS.Utilities.markSupportedForProcessing(function (itemPromise) { 
    var currentItem = {}; 

    return itemPromise.then(function (item) { 
     currentItem = item; 
     var myDiv = document.createElement("div"); 
     return WinJS.UI.Fragments.renderCopy("/html/1_BasicFragmentLoad_Fragment.html", myDiv) 
    }) 
    .then(function (fragment) { 
     var itemTemplate = WinJS.Utilities.query('.itemtemplate')[0]; 
     currentItem.data.title = fragment.innerHTML; 

     return itemTemplate.winControl.render(currentItem.data); 

    }); 
}

）;

在這個例子中，我將html片段的內容綁定到data.js.中給定項目的標題上。您需要更新itemtemplate並將標題元素綁定到innerHTML而不是textContent。

<h4 class="item-title" data-win-bind="innerHTML: title"></h4>

您還需要將自定義渲染器分配給列表視圖。您可以在HTML標記做到這一點，或只是更改模板JS在groupItems.js這個...

listView.itemTemplate = customRender;

如果你要創建自己的數據類，你可以把它放到承諾鏈從客戶渲染器放入類構造器中，消除了對客戶渲染器的需求。

來源

2012-08-19 16:16:38

非常感謝您的幫助:)只是還有一個問題。所以'dataset'有一個名爲'url'的屬性，它基本上規定了要在應用中呈現的頁面的URL。我將自定義呈現代碼更改爲：return WinJS.UI.Fragments.renderCopy（currentItem.data.url，divcontent），並使頁面呈現良好。我使用拆分視圖，當我更改「itemlistsection」中的項目時，新的HTML代碼被綁定在以前的數據下面。我該如何改變？謝謝：） – 2012-08-20 19:49:54

Windows 8/Metro UI數據綁定javascript

回答

相關問題