3

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

问候，吉姆

4

2 回答 2

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控件如何工作的文章。可能是一些很好的背景阅读。

ItemTemplate 也可以是 HTML 模板（参见 WinJS 控件 WinJS.Binding.Template）。如果您愿意，您还可以重用其他模板库，例如 Mustache.JS，并通过 itemTemplate 函数将它们挂钩。这是我写的一篇关于在 WinJS 中重用 Knockout 模板的文章。

于 2013-02-26T12:40:18.677 回答
0

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

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

于 2013-03-01T22:28:18.557 回答