DevExtreme使用knockout

Question

我对javascript和devextreme都很陌生，目前正在寻找解决方案。我创建了一个加载json文件的网页，该文件运行良好，但我无法使用devextreme完成它。

我有一个dxDataGrid，我想包含数据。使用.js文件，该数据也显示正确。我的json文件是这样的：

{
  "user": [
  {
    "id": 0,
    "name": "user0",
    "mail": "user0@example.com",
    "address": "examplestreet 0",
    "zip": "12345",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  },
  {
    "id": 1,
    "name": "user1",
    "mail": "user1@example.com",
    "address": "examplestreet 1",
    "zip": "23456",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  },
  {      
    "id": 2,
    "name": "user2",
    "mail": "user2@example.com",
    "address": "examplestreet 2",
    "zip": "34567",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  }
 ]
}

我尝试使用以下代码加载json文件，在google chromes开发人员工具下，对象正确显示，但由于我是新手，我无法弄清楚它为什么没有加载到dxDataGrid。

var getData = function () {
    var xmlhttp = new XMLHttpRequest(),
                        json;
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            json = JSON.parse(xmlhttp.responseText);
            console.log(json);
            return json;
        }
    };              

    xmlhttp.open('GET', 'data.json', true);
    xmlhttp.send();


};

var customersViewModel = {
    dataGridOptions: {
        dataSource: getData(),

        editing: {
            allowUpdating: true,
            allowAdding: true,
            mode: "form", 

            form: {
                items: [{
                    itemType: 'group',
                    caption: 'Basisinformationen',
                    items: ['user.name', 'user.mail', {
                        dataField: 'dayOfBirth',
                        editorOptions: {
                            min: new Date(1960,0,1),
                            max: new Date(2010,11,31)
                        }
                    }]
                },
                {
                    itemType: 'group',
                    caption: 'Kontakt',
                    items: ['user.address', 'user.zip', 'user.city', 'user.country']
                }]
            }

        },

        columns: [{
                dataField: 'name',
                caption: 'Name',
                validationRules: [{type: 'required'}]
            }, {
                dataField: 'mail',
                caption: 'E-Mail'
            }, {
                dataField: 'address',
                caption: 'Address'
            }, {
                dataField: 'zip',
                caption: 'Zip-Code'
            }, {
                dataField: 'city',
                caption: 'City'
            }, {
                dataField: 'country',
                caption: 'Country'
            }, {
                dataField: 'dayOfBirth',
                caption: 'Birthdate',
                dataType: 'date',
                format: "dd.MM.yyyy"
            }]
    }
};
return customersViewModel;

感谢您的任何建议！

编辑：json文件正在运行，我可以调用例如

alert(json.user[0].name);

我将收到文字＆＃34; user0＆＃34;的警告。但是如何在dataGrid中实现此功能？

编辑2：我编辑了我的代码并进行了以下操作：此代码已更改：

var getData = function () {
    var deferred = $.Deferred();
    var xmlhttp = new XMLHttpRequest(),
                        json;
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            json = JSON.parse(xmlhttp.responseText);
            json = Object.keys(json).map(function (k) { return json[k] });
            console.log(json);
            deferred.resolve(json); // json should be array here
        }
    };

    xmlhttp.open('GET', 'data.json', true);
    xmlhttp.send();

    return deferred.promise();
};

ViewModel（）原样保留。现在，我得到控制台输出：

虽然dataGrid仍然是空的。

Answer 1

＆＃34; getData（）＆＃34;方法应返回一个proimise，以便与dxDataGrid一起使用。 可能是这样的：

var getData = function () {
    var deferred = $.Deferred();
    var xmlhttp = new XMLHttpRequest(),
                        json;
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            json = JSON.parse(xmlhttp.responseText);
            console.log(json);
            //return json;
            deferred.resolve(json); // json should be array here
        }
    };              

    xmlhttp.open('GET', 'data.json', true);
    xmlhttp.send();

    return deferred.promise();
};

DevExtreme与JQuery承诺合作。我不确定其他承诺库。

更新1

看起来你得到了数组数组。在这种情况下，您只需要获取第一个元素：

deferred.resolve(json[0]); // json should be array here