问题
Im trying to build an windows8 app, i use the SplitApp as basic. Just trying to add data from AJAX but it fails.
In the file data.js i have:
(function () {
var list = new WinJS.Binding.List();
$.each(data(), function (key, item) {
list.push(item);
});
}
})();
In the file app.js i have (This works and populates the list in the app)
function data() {
var testGroupMeeting = [];
var testMeeting = [];
testGroupMeeting.push(new Group({ id: "1", title: "Group1" }));
testMeeting.push(new Meeting({ group: testGroupMeeting[0], title: "Item Title: 1" }));
return testMeeting;
}
But when i want to use AJAX to get data and return testMeeting when it is populated it crashes.
In the file app.js i have (Doesnt work) but i need to get this to work
function data() {
var testGroupMeeting = [];
var testMeeting = [];
$.ajax({
url: "/json/json.php",
dataType: 'json',
contentType: 'text/json',
type: 'GET',
success: function (data) {
//Data here is correct and mapped to the arrays, its the same as in the abow example, i have the same data in the arrays as in the above example
}
return testMeeting;
}
});
}
But the problem seems to be that AJAX is not supposed to be returning anything. And i cant do a callback to data.js because that function is anonymous as you can see.
How would you do this?
回答1:
This can not work this way, because the $.ajax function is asynchronous : it does the ajax call, and then, later, calls the "success" function with the appropriate data.
You'll have rewrite the $.each(data() ... so that instead of calling data() and expecting it to return testMeeting , you call data and expect it to call a callback with the testMetting object.
Something like :
(function () {
var list = new WinJS.Binding.List();
getData(function (theMetting) {
$.each(theMeeting, function (key, item) {
list.push(item);
});
}
})();
// callback is a function that will be called with
// something that is built from the server, after the ajax
// request is done
function getData(callback) {
$.ajax({
// ... everything you did ...
success: function (data) {
// ... use the data to build the meeting object
// and pass it to the callback
callback(meeting)
}
return testMeeting;
}
});
}
There is a fundamental difference between synchronous code (that returns functions) and asynchonous calls (that does some work, and later calls callback with the result). $.ajax is the typicall asynchronous function.
You could in theory pass the "async" flag to ajax, so that the $.ajax function does not return before the Ajax call is done, but you probably do not want to do that since it would block you UI.
Hoping this helps.
来源：https://stackoverflow.com/questions/15026352/how-to-populate-list-in-windows8-with-javascript