如何在Windows 8应用程序中显示数组中的数据 [英] How to show data from array in windows 8 app

问题描述

我在使用Windows 8应用程序在数组中显示信息时遇到问题，因此我将信息发送到视图中.

I have a problem displaying information in an array with windows 8 app, I send information to the view with this.

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);

我在这样的视图中接收数据(此方法有效，但是无法从文件数组中获取信息)

I receive the data in the view like this (This works, but cant get info from the files array)

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

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

How can i make it show the 2 objects in the array? If I try

<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不存在，但我想展示我想怎么做)

So clearly here is some data, So how can I do it if I want it like this. (Foreach doesnt exists, but I wanted to show how I want to do)

<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>

关于，吉姆

推荐答案

使用 WinJS.UI.ListView 控件.

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

Edit because I wrote this from the train: A WinJS ListView control is what you want to use to display a list of objects. The control gives you the ability to indicate a type of layout (list or grid layout) and define behaviors around what (if anything) happens when an item is tapped. You get to provide an itemTemplate for each item or you can create custom templating functions that render all kinds of different magical things depending on your item.

这是您如何使用它的快速示例.

This is a quick sample of how you would use it.

<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控件工作方式的一篇文章.可能是一些很好的背景知识.

See this for an example of how to use it. Shameless plug, I wrote an article about how WinJS controls work. Might be some good background reading.

ItemTemplate也可以是HTML模板(请参见WinJS控件WinJS.Binding.Template).如果需要，您还可以重用其他模板库(例如Mustache.JS)，并通过itemTemplate函数将其挂接.这是我写的有关重用淘汰赛模板的文章在WinJS中.

ItemTemplate can also be an HTML template (see WinJS control WinJS.Binding.Template). If you want you can also reuse other template libraries like Mustache.JS and hook them in through the itemTemplate function. Here is an article I wrote about reusing Knockout templates in WinJS.

这篇关于如何在Windows 8应用程序中显示数组中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！