如何使用ko.mapping.fromJS用Ajax调用中的数据填充observableArray？

Question

我有一个视图,其中包含一个模板,该模板具有循环遍历模型数组的foreach.但是,模型数组来自ajax调用.

以下是该场景的示例:

// Contained Model
function SomeModel() {
    var self = this;
    this.Firstname = ko.observable();
    this.Lastname = ko.observable();
    this.Fullname = ko.dependentObservable(function() {
        return this.Firstname + " " + this.Lastname;
    }, self);
}

// View Model
function SomeViewModel() {
    var self = this;

    this.ArrayOfModels = ko.mapping.fromJS([]);

    this.GetModelsByAjax = function() {
        $.ajax(...);
    };

    this.SuccessfullyRetrievedModelsFromAjax = function(models) {
        ko.mapping.updateFromJS(self.ArrayOfModels, models);
    };
}

ko.applyBindings(new SomeViewModel());

这是视图:

<HtmlGuff>
    <div data-bind="template: {name: 'model-template', foreach: ArrayOfModels}"></div>
</HtmlGuff>

// Template
<HtmlGuff>
    <h2 data-bind="text: Fullname">
    <div data-bind="text: Firstname" />
    <div data-bind="text: Lastname" />
</HtmlGuff>

这是ajax调用的json结果:

[{
    "Firstname": "Joe",
    "Lastname": "Blogs"
}, {
    "Firstname": "Foo",
    "Lastname": "Bar"
}]

目前我只是传入[]模型声明,但是我一直收到以下错误:

Firstname未定义

它打破了这个:return new Function("jQuery","$item", body);.

有什么方法可以做我想做的事吗？

Answer 1

你想做的事对我来说似乎很好。

这是一个可以正常工作的示例：http://jsfiddle.net/rniemeyer/ENMGp/，您可以尝试与之协调。

不过，我并不确切知道从 AJAX 调用中返回的“模型”是什么样子。

这些行缺少=，但我认为这只是一个键入错误，不会导致您列出的错误。

<div data-bind"text: Firstname" />
<div data-bind"text: Lastname" />

我认为最好的选择是对网络服务返回的模型进行一些日志记录，并确保它们没有以您不期望的方式嵌套。

如果您有关于 AJAX 调用结果的更多信息或任何其他线索，我们将很乐意继续提供帮助。