淘汰赛将新行添加到记录映射插件列表答案

【问题标题】：Knockout add new row to list of records mapping plugin淘汰赛将新行添加到记录映射插件列表
【发布时间】：2015-06-07 19:57:00
【问题描述】：

我正在使用映射插件来更新视图模型，如下所示：

        $.ajax({
            type: "POST",
            url: url,
            data: data,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (json) {
                if (json.Page == 1) {
                    ko.mapping.fromJS(json, {}, self);
                } else {
                    self.List().push(ko.mapping.fromJS(json.List));
                }
                console.log(ko.toJSON(self.List()));
            },
        });

然而，不是更新 List() 可观察数组（在 ajax 调用完成时仅添加新项目 - 对于第 2 页（DB 中的下几个项目），它添加了一个新 List => 注意控制台输出中的“[”元素：

AJAX 响应 (json)

{"DiscountType":"Transaction","List":[{"ActivationDate":"/Date(1427215761818)/","CustomerName":"另外两个 2","CustomerNumber":4328,"Percent" :20,"HasDiscount":true},{"ActivationDate":"/Date(1428079761818)/","CustomerName":"另一棵树","CustomerNumber":1212,"Percent":20,"HasDiscount":true }],"页面":2}

控制台输出：

[{"ActivationDate":"/Date(1388556000000)/","CustomerName":"Test1 Inc.","CustomerNumber":10032,"Percent":20,"HasDiscount":true},{"ActivationDate ":"/Date(1426783761818)/","CustomerName":"另一个 1","CustomerNumber":5174,"Percent":20,"HasDiscount":true},[{"ActivationDate":"/Date( 1427215761818)/","CustomerName":"另外两个 2","CustomerNumber":4328,"Percent":20,"HasDiscount":true},{"ActivationDate":"/Date(1428079761818)/","CustomerName ":"另一棵树","CustomerNumber":1212,"Percent":20,"HasDiscount":true}]]

我做错了什么？

【问题讨论】：

能把json.List的内容贴出来吗？您的问题似乎是 json.List 是一个数组，并且您将该 Array 对象作为一个元素推送到您现有的 Array 中，而不是 Array 中的单个元素。
没错。 json List 是一个数组。我将如何推动单个元素？映射插件会正确处理新 List 元素的属性吗？

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

要推送返回数组的各个元素，请执行以下操作

success: function (json) {
    if (json.Page == 1) {
        ko.mapping.fromJS(json, {}, self);
    }
    else {
        json.List.forEach( 
            function(element) {
               self.List.push( ko.mapping.fromJS(element) );
            } );
        }
    console.log(ko.toJSON(self.List()));
        }

var vm = function() {
  var self = this;
  self.List = ko.observableArray([]);
  self.initiate = function() {
    json = JSON.parse('{"DiscountType":"Transaction","List":[{"ActivationDate":"/Date(1427215761818)/","CustomerName":"Another two 2","CustomerNumber":4328,"Percent":20,"HasDiscount":true},{"ActivationDate":"/Date(1428079761818)/","CustomerName":"Another tree","CustomerNumber":1212,"Percent":20,"HasDiscount":true}],"Page":2}');
    json.List.forEach(function(entry) {
      self.List.push(ko.mapping.fromJS(entry));
    });
  };
};
vm = new vm();
ko.applyBindings(vm);
vm.initiate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js'></script>
<html>

<div data-bind='foreach: List'>
  <div data-bind='text: ActivationDate'></div>
</div>

</html>

【讨论】：

现在我得到了这个：[....+"ko_mapping":{"ignore":[],"include":["_destroy"], "copy":[],"observe":[],"mappedProperties":{"ActivationDate":true,"CustomerName":true,"CustomerNumber":true,"Percent":true,"HasDiscount":true}, "copiedProperties":{}}},{"ActivationDate":"/Date(1428079761818)/","CustomerName":"另一棵树","CustomerNumber":1212,"Percent":20,"HasDiscount":true, "ko_mapping":{"ignore":[],"include":["_destroy"],"copy":[],"observe":[],"mappedProperties":{"ActivationDate ":true,"CustomerName":true,"CustomerNumber":true,"Percent":true,"HasDiscount":true},"copiedProperties":{}}}]
一些奇怪的字符出现在console.log(self.List());
我添加了一个代码 sn-p 让您了解如何处理这个问题。
你和 OP 都犯了一个严重错误：你在推送之前评估 observableArray：self.List().push( ko.mapping.fromJS(element) ); 应该是 self.List.push( ko.mapping.fromJS(element) );
@dperry 是的，我刚刚复制了他的代码作为最初的答案，但是当我自己写出来时，我注意到并更正了它。