KnockoutJS 映射模型添加到 Observable 数组答案

【问题标题】：KnockoutJS mapped Model add to Observable arrayKnockoutJS 映射模型添加到 Observable 数组
【发布时间】：2023-03-23 06:00:01
【问题描述】：

我想从一个基本上是 AJAX 帖子的动态模型创建一个可观察数组，以获取 JSON 信息。然后我想将该数组添加到表中。

这是我创建 Viewmodel 的 Javascript，以及要添加到数组的内容：

var ProductViewmodel;
    function bindProductModel(Products) {
        var self = this;
        self.items = ko.mapping.fromJS([]);
        ProductViewmodel = ko.mapping.fromJS(Products, self.items);
        console.log(ProductViewmodel);
        ko.applyBindings(ProductViewmodel);
    }

    function JSONProducts() {
        $.ajax({
            url: "WebForm1.aspx/AvailibleProducts",
            // Current Page, Method  
            data: '{Warehouse: 1}',
            // parameter map as JSON  
            type: "POST",
            // data has to be POSTed  
            contentType: "application/json; charset=utf-8",
            // posting JSON content      
            dataType: "JSON",
            // type of data is JSON (must be upper case!)  
            timeout: 10000,
            // AJAX timeout  
            success: function (result) {
                bindProductModel(result);
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    }

JSON 的获取完美：

{
"d": [
    {
        "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.ProductStagingMethod",
        "ProductSKUID": 2,
        "ProductSKUName": "Decoder 1131",
        "WarehouseID": 1,
        "WarehouseName": "SoftwareDevelopmentTest",
        "SystemAreaName": "Staging",
        "Qty": 5
    }
]

}

这是我尝试将它数据绑定到我的表的地方：

<div id="TableContainer" class="gridview">
    <table border="1" cellpadding="0" cellspacing="0">
     <tbody data-bind="foreach: ProductViewmodel">
       <tr>
        <td data-bind="text: ProductSKUID"></td>
        <td data-bind="text: ProductSKUName"></td>
        <td data-bind="text: WarehouseID"></td>
        <td data-bind="text: WarehouseName"></td>
        <td data-bind="text: SystemAreaName"></td>
        <td data-bind="text: QTY"></td>

        </tr>
        </tbody>
    </table>
</div>

它似乎不想将它添加到我的数组中。任何建议将不胜感激。

问候雅克

【问题讨论】：

标签： jquery json knockout.js knockout-mapping-plugin

【解决方案1】：

您的代码有 3 个问题：

data-bind="foreach: ProductViewmodel" 您尝试在整个 ProductViewmodel 上进行搜索，但您需要在 items 上进行。所以改成<tbody data-bind="foreach: items">
您的 json 对象包含在 d 属性中，因此您需要在映射中处理它。所以你需要写：ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
您打错了Qty 属性名称。正确的绑定是：<td data-bind="text: Qty"></td>（数据绑定表达式区分大小写）

我已经 created a fiddle 提供了包含修复程序的代码。

【讨论】：

【解决方案2】：

你需要用 ko.mapping.fromJSON 代替 ko.mapping.fromJS 吗？

【讨论】：

我尝试了 ko.mapping.fromJSON，它似乎对我不起作用。但总是愿意再试一次。