从.ajax()调用中加载knockout.js observableArray()

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (56)

这让我感到困惑。它一定是我看不到的小东西。我正尝试observableArray在ajax调用中加载一个非常简单的淘汰赛。

JavaScript的

// we bind the array to the view model property with an empty array.
var data = [];   
var viewModel = {
    vendors: ko.observableArray(data)
};
ko.applyBindings(viewModel);

$(function () {
    // on this click event, we popular the observable array
    $('#load').click(function () {
        // WORKS. Html is updated appropriately.
        viewModel.vendors([{ "Id": "01" },{ "Id": "02" },{ "Id": "03" }]);

        // DOES NOT WORK. Fiddler2 shows the same exact json string come back 
        // as in the example above, and the success function is being called.
        $.ajax({
            url: '/vendors/10',
            dataType: 'json',
            success: function (data) {
                viewModel.vendors(data);
            }
        });
    });
});

HTML

<button id="load">Load</button>
<ul data-bind="template: { foreach: vendors }">
    <li><span data-bind="text: Id"></span></li>
</ul>

问题:为什么成功的ajax调用,谁的data变量值匹配字节为硬件类型值的字节,不触发html刷新?

提问于
用户回答回答于

没有理由,这不会工作正常。如此演示。

http://jsfiddle.net/madcapnmckay/EYueU/

我会检查ajax文章实际上是否返回json数据,以及那个json是一个数组并且它正在被正确解析。

我不得不调整ajax调用来让小提琴ajax处理程序正常工作。

我再也想不到。

用户回答回答于
var self=this;
//var self first line in model

$.ajax({
            url: ",
            dataType: "json",
            contentType: 'application/json',
            type: "POST",
            data: JSON.stringify({ }),
            processdata: true,

            beforeSend: function () {
                $.mobile.loading('show');
            },

            error: function (xhr, textStatus, errorThrown) {
                alert('Sorry!');
            },

            success: function (data) {

                $.mobile.loading('hide');
                if (data.result!= '') {
                    self.vendors(data.result);



                } else {
                    self.vendors({something});

                }
            }
        });

使用self.vendors而不是这个viewModel.vendors

扫码关注云+社区

领取腾讯云代金券