假设您想坚持 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 并将 title 元素绑定到 innerHTML 而不是 textContent。
<h4 class="item-title" data-win-bind="innerHTML: title"></h4>
您还需要将自定义渲染器分配给列表视图。您可以在 HTML 标记中执行此操作,或者只需将 groupItems.js 中的模板 js 更改为此...
listView.itemTemplate = customRender;
如果您要创建自己的数据类,您可能希望将来自客户渲染器的承诺链放入类构造函数中,从而消除对客户渲染器的需要。