Windows 8 中的列表视图（WinJS）中的动态模板答案

【问题标题】：Dynamic template in listview (WinJS) in windows 8Windows 8 中的列表视图（WinJS）中的动态模板
【发布时间】：2023-03-13 17:00:02
【问题描述】：

我有一个 Windows 8 应用程序，在列表布局中有一个简单的列表视图。我已经获取了我的博客项目（联合），现在我想要实现的是添加一个动态项目，该项目将用作“加载更多”按钮。为此，我想为此项目指定一个不同的模板。我发现的示例使用了一个函数模板，它确实不是很通用，因为我必须使用 JavaScript 加载所有模板元素。有没有办法根据项目属性动态指定 WinJS.Binding.Template？

【问题讨论】：

让我再澄清一点：我不想使用 javascript 函数来通过代码呈现两个模板，因为每个模板都相当复杂。我想定义两个 WinJS.Binding.Template div，并为每个项目动态选择使用哪一个。

标签： windows-8 winjs

【解决方案1】：

一篇关于这个主题的优秀文章

http://stephenwalther.com/blog/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx

【讨论】：

【解决方案2】：

其实我之前也遇到过同样的问题。我处理这个问题的方法如下：

function listItemTemplateRenderer(item) {

    //Get data from item.
    var data = item._value.data;

    // if it is a special item renderer, apply special template
    if (data.isSpecialItem) {
        return specialItemRenderer(data);
    }

    var itemElement = document.createElement('div');
    itemElement.className = "listItemTemplate";

    var placeHolder = document.createElement('div');
    placeHolder.className = "itemTemplateClass";
    placeHolder.id = data.id;

    var itemDetail = document.createElement('div');
    itemDetail.className = "itemDetailStyle";

    ... //whatever you wanna add to your template

    //Append child elements
    placeHolder.appendChild(itemDetail);
    itemElement.appendChild(placeHolder);

    return {
        element: itemElement
    };
}

// Template for the special item
function messageItemRenderer(item) {

    var itemElement = document.createElement('div');
    itemElement.className = "listItemTemplat";

    var placeHolder = document.createElement('div');
    placeHolder.className = "specialItemTemplate";
    placeHolder.id = item.id;

    var dataText = document.createElement('div');
    dataText.className = "dataText";
    dataText.innerText = item.text;
    placeHolder.appendChild(dataText);

    itemElement.appendChild(placeHolder);

    itemElement.onclick = item.clickHandler;

    return {
        element: itemElement
    };
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

我认为本教程的最后一部分“Using a function to display items”可以帮助到你。在该函数中，您可以确定列表中有哪些项目并呈现不同的模板。也可以从您的 HTML 文件中加载不同的模板。

您可能拥有的另一个选项是将pagesToLoad 属性与automaticallyLoadPages 属性结合使用。当用户滚动到列表框的末尾时，这将自动开始加载新项目。

【讨论】：