在Knockout.js中异步应用绑定

时间:2017-07-24 11:34:03

标签: javascript json asynchronous knockout.js jquery-select2

我很难理解如何使用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');
    });
}

1 个答案:

答案 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 ...但我想这是一个品味问题。