无法处理绑定，使用 ko.mapping.fromJS 将 JSON 数据推送到 ObservableArray

Question

谁能解释我的代码有什么问题，我是新手...所以，最初我从数据库接收到 json 数据并且它可以工作。当我单击“添加一些”时，我想将相同的数据从数据库添加（推送）到我的可观察数组中。下面的代码显然不起作用。谢谢。 错误：无法处理绑定“text: function (){return AdId }”...

HTML：

<div data-bind="foreach: Ads">     
    <p data-bind="text: AdId"></p>         
</div>

<div data-bind="click: addSome">Add some</div>

型号：

function AdListModel() {
var self = this;
self.Ads = ko.mapping.fromJS([]);

self.result = function (model) {
    ko.mapping.fromJS(model, self.Ads);
}    

self.InitialData = function () {
    $.ajax({
        type: "GET",
        url: '/Home/GetAllAds',
        data: { startPosition: 0, numberOfItems: 2 },
        dataType: "json",
        success: function (data) {

            self.result(data); <---- works

        }
    });
}

self.addSome = function () {
    $.ajax({
        type: "GET",
        url: '/Home/GetAllAds',
        data: { startPosition: 0, numberOfItems: 2 },
        dataType: "json",
        success: function (data) {

            self.Ads.push(data); <---- doesn't work


        },
    });

};

self.InitialData();
}

ko.applyBindings(new AdListModel());

我试过self.Ads.push(ko.mapping.fromJS(data)) - 没用。

Answer 1

从错误消息看来，您的model 没有AdId 属性。

您能否添加 API 返回的 JSON 模型的转储？

编辑

您的Ads 属性应该是ko.observableArray() 而不是ko.mapping.fromJS([])：

function AdListModel() {
    var self = this;
    self.Ads = ko.observableArray([]);

    self.result = function (model) {
        ko.mapping.fromJS(model, self.Ads);
    }    

编辑 2

而且你必须在推送之前映射数据：

$.ajax({
    type: "GET",
    url: '/Home/GetAllAds',
    data: { startPosition: 0, numberOfItems: 2 },
    dataType: "json",
    success: function (data) {
        self.Ads.push(ko.mapping.fromJS(data));
    },
});

编辑 3

如果您的 JSON 如下所示：

[
    {"AdId":1,"AdContent":"test1"},
    {"AdId":2,"AdContent":"test2"}
]

那么它是一个数组，你必须遍历每个条目：

$.ajax({
    type: "GET",
    url: '/Home/GetAllAds',
    data: { startPosition: 0, numberOfItems: 2 },
    dataType: "json",
    success: function (data) {
        data.forEach(function(d) {
            self.Ads.push(ko.mapping.fromJS(d));
        });
    },
});