javascript - Windows 8/Metro UI 数据绑定(bind) javascript

Question

我正在为 Windows 8 使用 javascript/HTML 创建一个应用程序，它基本上显示从 html 文件中提取的文本。

我正在使用 data.js 文件来组织组和项目。其中一个属性是“url”，它存储包含应用程序主要内容的 html 页面的 url。

我想出了这个代码来从包含要显示的内容的 html 页面检索 html 代码:

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

如何为 data.js 中数组中的每个项目运行此代码并绑定(bind)数据，以便内容来自 HTML 页面，标题/标题来自 data.js 文件？

如果造成任何困惑，我深表歉意。我将不胜感激任何帮助。

谢谢。

Answer 1

假设您想坚持使用 data.js 的布局而不创建自己的数据类，我会为 ListView 使用自定义渲染器。

类似这样的事情...

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 片段的内容绑定(bind)到 data.js 中给定项目的标题。您将需要更新 itemtemplate 并将 title 元素绑定(bind)到 insideHTML 而不是 textContent。

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

您还需要将自定义渲染器分配给 ListView 。您可以在 HTML 标记中执行此操作，或者只需将 groupItems.js 中的模板 js 更改为此...

 listView.itemTemplate = customRender;

如果您要创建自己的数据类，您可能希望将来自客户渲染器的 promise 链放入类构造函数中，从而消除对客户渲染器的需要。