windows-8 - Windows 8 中的列表视图（WinJS）中的动态模板

Question

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

Answer 1

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

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

Answer 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
    };
}

希望这可以帮助。

Answer 3

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

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