WinJs-数据绑定与自定义arrayList答案

【问题标题】：WinJs-Data Binding with a custom arrayListWinJs-数据绑定与自定义arrayList
【发布时间】：2013-03-28 10:53:45
【问题描述】：

在我看来，这太复杂了，我尝试了很多东西，但都没有结果。我想在我的 Metro 应用程序 (Winjs/HTML) 上创建一个水平列表视图，因此创建模板和 listView html 元素。我将从中获取 image_url 的 DataSource 的问题是高级的。这是我的Json web Service返回的这个DataSource的形式（不知道是不是HashTable，ListArray...？？）：

"path_categories":
{
"star":"the image url ",
"Fruits ": " the image url ",
"Animaux":"the image url ",
"Country":"the image url ",
"Coulor":"the image url ",
"Town":"the image url ",
"capital":"the image url "
}

我应该设置特定的属性来绑定我的在此处输入代码

任何帮助将不胜感激，认为

【问题讨论】：

您是否尝试将上述 JSON 数据绑定到 Visual Studio 附带的 JavaScript Grid 应用模板中的 listView？该模板使用 data.js 文件中定义的 JSON 数据来演示数据绑定，而不会增加从外部服务返回 JSON 的复杂性，因此它可以向您展示如何根据您的数据将 ListView 连接到 WinJS.Binding.list。但请记住，数据中的每个“项目”都应为包含该值的属性使用一致的名称，而上述情况似乎并非如此。

标签： javascript microsoft-metro windows-store-apps winjs

【解决方案1】：

您的视图模型需要使用传入的数据并公开类似这样的项目。

var ViewModel = WinJS.Class.define(
    function ViewModel(data)
    {
        var categories = data.path_categories;
        var keys = object.keys(categories);
        var items = [];
        for (var i = 0; i < keys.length; i++)
        {
            var imageUrl = categories[key];
            var item = { imageUrl : imageUrl };
            items.push(item);
        }

        this.items = new WinJS.Binding.List(items);
    });

function ondataload(data)
{
    var viewModel = new ViewModel(data);
    listView.winControl.itemDataSource = viewModel.items.dataSource;
}

HTH。

【讨论】：