我很难理解如何使用knockoutJS异步绑定我的级联Select2下拉字段。
当要填充的数据在函数内是静态时,代码可以正常工作,但是在使用异步ajax调用时不能正常工作,因为绑定是在接收响应之前执行的。
任何人都可以引导我走向正确的方向或发现问题,因为我是淘汰赛。初学者?
敲除
var viewModel = {
togaMakers: buildData(),
selectedInstitution : ko.observable(),
selectedLevel : ko.observable(),
selectedFaculty : ko.observable()
};
viewModel.togaLevels = ko.computed(function(){
if(viewModel.selectedInstitution()){
var make = ko.utils.arrayFirst(viewModel.togaMakers,function(item){
//console.log(item.text,viewModel.selectedInstitution());
return item.text===viewModel.selectedInstitution();
});
return make.childOptions;
}
});
viewModel.togaFaculties = ko.computed(function(){
if(viewModel.selectedLevel()){
var type = ko.utils.arrayFirst(viewModel.togaLevels(),function(item){
//console.log(item.text,viewModel.selectedLevel());
return item.text===viewModel.selectedLevel();
//console.log("Answer:" + item);
});
return type.childOptions;
}
});
ko.cleanNode(viewModel);
ko.applyBindings(viewModel);
buildData()
function buildData() {
var gotData = getData();
return gotData.then(function() {
console.log('step 4 - return result');
returnData = gotData;
return returnData;
});
}
的getData()
// Get all data from ajax call
function getData() {
var data = { 'action': 'get_data' };
var deferred = new jQuery.Deferred();
return jQuery.post(ajaxurl, data, function(response) {
// console.log(response);
console.log('step 1 - parse ajax data');
var obj = JSON.parse(response);
console.log('step 2 - process received data');
results = processData(obj);
}).done(function() {
console.log('step 3 - ajax parsing & processing data done');
console.log(results);
deferred.resolve(results);
return deferred;
}).fail(function() {
console.log('fail');
});
}
答案 0 :(得分:1)
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="{Binding Path = PersonCollection}">
需要返回buildData
,以便在数据更改后自动更新绑定:
observable
我首先会亲自在function buildData() {
var dataContainer = ko.observableArray([]);
getData().then(function(newData) {
console.log('step 4 - return result');
dataContainer(newData);
});
return dataContainer; // Initially empty array
};
中定义数组,然后通过引用它在viewModel
内写一下。如果您使用基于类/实例的方法可能会有帮助,因此您可以使用then
引用dataContainer ...但我想这是一个品味问题。