Question

在我的应用程序中，我想将ajax响应中的项添加到knockout的observableArray中。我的HTML：

<select id="mySelect" data-bind="options: MyArray"></select>

所以我有一个简单的viewmodel：

var viewModel = { MyArray: ko.observableArray() };

在我的剧本之后：

$(document).ready(function() {
    ko.applyBindings(viewModel);
    $.ajax({
        url: "MyUrl",
        type: "GET",
        success: function () {
            viewModel.MyArray.push('foo');
        }
    });
});

然后什么也没发生。如果我将此代码更改为：

$(document).ready(function() {
    ko.applyBindings(viewModel);
    viewModel.MyArray.push('foo');
});

一切正常。（当然这只是一个简单的例子）。

我该如何解决这个问题？

任何帮助都将不胜感激。

更新

我犯了一些错误，问题是wijmo。它将select更改为div，我必须调用

 $("#mySelect").wijdropdown('refresh');

添加元素后。

Answer 1

将success调用中的$.ajax参数更改为complete，以便在请求完成时执行，无论成功与否。使用以下代码检查请求的状态，以帮助确定其不起作用的原因：

$(document).ready(function() {
    ko.applyBindings(viewModel);
    $.ajax({
        url: "MyUrl",
        type: "GET",
        complete: function (jqXHR, textStatus) {
            viewModel.MyArray.push('foo');

            window.console.log(jqXHR);
            window.console.log(textStatus);
        }
    });
});

更新：如果这不是问题，请尝试使用以下内容初始化您的可观察数组：

MyArray: ko.observableArray([])

Answer 2

看到这个小提琴： http://jsfiddle.net/jaq316/hEjWz/

HTML：

<select data-bind="options: MyArray"></select>

JavaScript的：

var viewModel = { MyArray: ko.observableArray() };

$(document).ready(function() {
    ko.applyBindings(viewModel);
    $.ajax({
        url: "http://baconipsum.com/api/?type=meat-and-filler",
        type: "GET",
        success: function (data) {
            for (i = 0; i < data.length; i++)
            {
                viewModel.MyArray.push(data[i]);
            }
        }
    });
});

这完美无缺。我的建议是检查网络流量，看看你的ajax请求是否真的成功完成。

推送项目以在ajax请求成功函数中淘汰observableArray

2 个答案: