如何在windows8应用程序中显示数组中的数据

How to show data from array in windows 8 app

本文关键字：显示 数组 数据 应用程序 windows8      更新时间：2023-09-26

我在使用windows 8应用程序的数组中显示信息时遇到问题，我用它将信息发送到视图。

var details = document.querySelector(".articlesection");
var data = [{
    "id": "1",
    "title": "Title text",
    "files": [
        {
            "id": "1",
            "title": "File1"
        },
        {
            "id": "2",
            "title": "File2"
        }
    ]
}];

binding.processAll(details, data);

我在视图中收到这样的数据(这很有效，但无法从文件数组中获取信息(

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
</div>

如何使它显示数组中的2个对象？如果我尝试

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
    <p data-win-bind="textContent: files">
        <!-- i get [Object object], [Object object] -->
    </p>
</div>

很明显，这里有一些数据，如果我想要这样，我该怎么做呢(Foreach不存在，但我想展示我想怎么做(

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
    <ul data-win-bind: foreach: files>
        <!-- Foreach all files, how can I do this? Foreach doesn't exist. -->
        <li>
            <span data-win-bind="textContent: id"></span> 
            <span data-win-bind="textContent: title"></span>
        </li>
    </ul>
</div>

谨致问候，Jim

使用WinJS.UI.ListView控件。

编辑，因为我是在火车上写的：WinJS ListView控件是您想要用来显示对象列表的控件。控件使您能够指示布局的类型(列表或网格布局(，并定义点击项目时发生的行为(如果有(。您可以为每个项目提供一个itemTemplate，也可以创建自定义模板函数，根据您的项目呈现各种不同的神奇事物。

这是一个如何使用它的快速示例。

<div id='lv' data-win-control='WinJS.UI.ListView' />
var lv = $('#lv')[0].winControl;
var data = ...; // some js array
var bindinglist = new WinJS.Binding.List(data);
lv.itemDataSoutce = bindinglist.dataSource;
lv.itemTemplate = function(itemPromise) {
    return itemPromise.then(function(item) {
        var f = $('<div></div>');
        f.text(item.title);
    });
};

看看这个如何使用它的例子。无耻的插件，我写了一篇关于WinJS控件如何工作的文章。可能是一些不错的背景读物。

ItemTemplate也可以是HTML模板(请参阅WinJS控件WinJS.Binding.template(。如果你愿意，你也可以重用其他模板库，如Mustache.JS，并通过ItemTemplate函数将它们挂起。这是我写的一篇关于在WinJS中重用Knockout模板的文章。

使用转换器来解决此问题。在您的示例代码中，而不是这一行：

<p data-win-bind="textContent: files"></p> // i get [Object object], [Object object]

你可以添加一个转换器作为

<p data-win-bind="innerHTML: files myFilesToStringConverter"></p>

并在.js文件中定义您的转换器，例如

var myFilesToStringConverter = WinJS.Binding.converter(function(files){
   var convertedValue = "<ul>";
   for(var i=0;i<files.length;i++){
      convertedValue += "<li><span>" +files[i].id + "</span> <span> " + files[i].title + "</span></li>";
   convertedValue += "<ul>";
   return convertedValue ;
   }
});

有了这个转换器，您将看到按预期列出的文件的ID和名称。

相关文章：