Question

我在使用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>

此致吉姆

Answer 1

使用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);
    });
};

有关如何使用它的示例，请参阅this。无耻的插件，我写了关于WinJS控件如何工作的an article。可能是一些很好的背景阅读。

ItemTemplate也可以是HTML模板（参见WinJS控件WinJS.Binding.Template）。如果需要，还可以重用其他模板库，如Mustache.JS，并通过itemTemplate函数将它们挂钩。这是WinJS中的article I wrote about reusing Knockout templates。

Answer 2

使用converters解决此问题。在您的示例代码中而不是此行：

<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和名称。

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

2 个答案: