Question

我正在尝试使用敲除和通过ajax调用检索的数据来更新下拉列表。单击刷新链接即可触发ajax调用。首次呈现页面时，将成功填充下拉列表。但是，单击刷新会清除下拉列表，而不是重新填充新数据。

HTML：

<select data-bind="options: pages, optionsText: 'Name', optionsCaption: 'Select a page...'"></select> 
<a id="refreshpage">Refresh</a>

脚本：

var initialData = "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]";
var viewModel = {
    pages : ko.mapping.fromJS(initialData)
};

ko.applyBindings(viewModel);


$('#refreshpage').click(function() {
    $.ajax({
        url: "@Url.Action("GetPageList", "FbWizard")",
        type: "GET",
        dataType: "json",
        contentType: "application/json charset=utf-8",
        processData: false,
        success: function(data) {
            if (data.Success) {
                ko.mapping.updateFromJS(data.Data);
            } else {
                displayErrors(form, data.Errors);
            }
        }
    });
});

来自ajax电话的数据：

{
  "Success": true,
  "Data": "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]"
}

我做错了什么？

Answer 1

你遇到的问题是你没有告诉映射插件要定位什么。如何知道您传递的数据应该映射到页面集合。

以下是代码的简化版本，用于说明映射的目标。

BTW initialData和ajax结果是相同的，所以如果它有效，你就不会注意到它的变化。

http://jsfiddle.net/madcapnmckay/gkLgZ/

var initialData = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}];

var json = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"}];

var viewModel = function() {
    var self = this;

    this.pages = ko.mapping.fromJS(initialData);

    this.refresh = function () {
         ko.mapping.fromJS(json, self.pages);
    };
};

ko.applyBindings(new viewModel());

我删除了jquery点击绑定。你有什么理由需要使用jquery click bind而不是Knockout绑定吗？如果可能的话，不建议将两者混合在一起，它会淡化KO在执行方面非常擅长的关注点。

希望这有帮助。

通过knockout和ajax更新下拉列表

1 个答案: