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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6637579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 21:21:24  来源:igfitidea点击:

How to use ko.mapping.fromJS to fill an observableArray with data from an Ajax call?

javascriptajaxknockout.js

提问by somemvcperson

I have a view which contains a template that has a foreach to loop round an array of models. However, the array of models comes from an ajax call.

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

Here is an example of the scenario:

以下是该场景的示例:

// 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());

Here's the View:

这是视图:

<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>

And this is the json result from the ajax call:

这是 ajax 调用的 json 结果:

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

Currently I am just passing in []to the model declaration, however I keep getting the following error:

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

Firstname is not defined

名字未定义

It breaks on this: return new Function("jQuery","$item", body);.

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

Is there any way to do what I want to?

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

采纳答案by RP Niemeyer

What you are trying to do seems fine to me.

你正在尝试做的事情对我来说似乎很好。

Here is a sample with it working: http://jsfiddle.net/rniemeyer/ENMGp/that you could maybe try to reconcile against.

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

I don't know exactly what your "models" look like coming back from your AJAX call though.

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

These lines are missing an =, but I assume that is just a typing error and would not result in the error that you listed.

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

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

I think that your best bet would be to do some logging on the models being returned by your web service and make sure that they are not nested in a way that you are not expecting.

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

Would be happy to continue helping, if you have more info on the result of your AJAX call or any other clues.

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