无法在 knockoutJS 视图模型中映射 .json 数据

Question

我有这个小型 MVC 应用程序，它进行 .ajax 调用，以 .json 格式获取数据并以 html 显示响应。我是 knockoutJS 的新手，我在将 json 格式映射到模型中时遇到问题。

我能够将 .ajax 调用时收到的 json 数据映射到一个数组 (categories) 中，但是当我尝试将其添加到 shoppingCart 数组它不显示映射的数据。

谁能帮我解释为什么在尝试将数据添加到 shoppingCart 集合时数据丢失了？

数据库表：

Product
Id | Name | Price|
1  | Buns  | 1.00

ProductTag
Id | Name       | Fk_Product_Id|
1  | Baked Goods| 1

/* Fk_Product_Id - points to Product Id */

Json 格式的响应：

{
  "Data": [
    {
      "ProductTags": [
        {
          "Id": 1,
          "Name": "Baked Goods",
          "Fk_Product_Id": 1
        },
        {
          "Id": 2,
          "Name": "Hot Dogs",
          "Fk_Product_Id": 1
        }
      ],
      "Id": 1,
      "Name": "Buns",
      "Price": 1.00
    }           
  ],
}

js文件：

var categories = [];
$.ajax({
    url: 'ShoppingCart/GetAllProducts',
    cache: false,
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    data: {},
    success: function (data) {
        // I had to map the data to model manually. 
        // Ko.mapper didn't work for me.
        var parsed = JSON.parse(data);
        var product = parsed.Data;
        console.log(parsed);
        for (var i = 0; i < product.length; i++) {
            var id = product[i].Id;
            var name = product[i].Name;
            var price = product[i].Price;
            var productTag = product[i].ProductTags;
            categories.push(new Product(id, name, price,productTag));
        }
    }
});

function Product(id, name, price, productTags) {
    var self = this;
    self.id = ko.observable(id),
    self.name = ko.observable(name);
    self.price = ko.observable(price);
    self.productTags = typeof (productTags) !== "undefined" ? productTags : [];
    self.productTags = ko.observableArray(productTags);
}

function PersonViewModel() {
    var self = this;
    self.firstName = ko.observable("John");
    self.lastName = ko.observable("Smith");
    self.checkout = function () {
        alert("Trying to checkout");
    };

    self.shoppingCart = ko.observableArray(categories);

};
//var viewModel = new PersonViewModel();
//ko.applyBindings(viewModel);
var viewModel = new PersonViewModel();
ko.applyBindings(viewModel, document.getElementById('shoppingCart'));

Html:

<div id="shoppingCart">
   <table>
        <thead><tr>
            <th>Item number</th>
            <th>Product</th>
            <th>Price</th>
            <th>Tags</th>
            <th>Action</th>
        </tr></thead>
        <tbody data-bind='foreach: shoppingCart'>
        <tr>
            <td data-bind='text: $index'></td>
            <td data-bind='text: name'></td>
            <td data-bind='text: price'></td>
            <td>
                <ul data-bind="foreach: productTags">
                    <li data-bind="text:$data">
                    </li>
                </ul>
            </td>

            <td>
                <button data-bind='click: $root.removeProduct'>Remove</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

Answer 1

您只是在更新一个名为 categories 的局部变量，而不是视图模型的 observableArray 属性。相反，循环 Data 并推送到 viewModel.shoppingCart.

setTimeout(() => {
    const response = {"Data":[{"ProductTags":[{"Id":1,"Name":"Baked Goods","Fk_Product_Id":1},{"Id":2,"Name":"Hot Dogs","Fk_Product_Id":1}],"Id":1,"Name":"Buns","Price":1.00}],}

  response.Data.forEach(p => {
    // push to observableArray 
    viewModel.shoppingCart.push(new Product(p.Id, p.Name, p.Price, p.ProductTags))
  })
}, 2000)

function Product(id, name, price, productTags) {
  var self = this;
  self.id = ko.observable(id);
  self.name = ko.observable(name);
  self.price = ko.observable(price);
  let tags = typeof(productTags) !== "undefined" ? productTags : [];
  self.productTags = ko.observableArray(tags);
}

function PersonViewModel() {
  var self = this;
  self.firstName = ko.observable("John");
  self.lastName = ko.observable("Smith");
  self.shoppingCart = ko.observableArray([]); // initialize to empty array
};

var viewModel = new PersonViewModel();
ko.applyBindings(viewModel);

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

<table>
  <thead>
    <tr>
      <th>Item number</th>
      <th>Product</th>
      <th>Price</th>
      <th>Tags</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody data-bind='foreach: shoppingCart'>
    <tr>
      <td data-bind='text: $index'></td>
      <td data-bind='text: name'></td>
      <td data-bind='text: price'></td>
      <td>
        <ul data-bind="foreach: productTags">
          <li data-bind="text:Name">
          </li>
        </ul>
      </td>

      <td>
        <button data-bind='click: $root.removeProduct'>Remove</button>
      </td>
    </tr>
  </tbody>
</table>

无法在 knockoutJS 视图模型中映射 .json 数据

Unable to map .json data in knockoutJS viewmodel

javascript

knockout.js