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

时间:2011-07-09 21:28:15

标签: javascript ajax knockout.js

我有一个视图,其中包含一个模板,该模板具有循环遍历模型数组的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"
}]

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

  

未定义名字

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

有什么办法可以做我想做的事吗?

1 个答案:

答案 0 :(得分:3)

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

以下是一个有效的示例:http://jsfiddle.net/rniemeyer/ENMGp/您可以尝试协调。

我不知道你的“模特”究竟是从你的AJAX电话中回来的。

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

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

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

如果您有关于AJAX通话结果或任何其他线索的更多信息,将很乐意继续提供帮助。