javascript - 如何附加 json 并使用 ajax(可观察数组)显示结果

Question

每当我单击该添加按钮时，它应该使用 ajax 获取 json 数据，并将其附加到我的 Observable 数组中，在 html 中我也想附加它。

这是我的代码

    function ProductViewModel() {
      var self = this;
      self.ProductList = ko.observableArray([]);

      self.GetProducts = function (){
        $.ajax({
          type: "POST",
          dataType: "json",
          url: 'data.json',
          //my json data is 
          //{"1":{"name":"user","productname":"hello"},"2":{"name":"user2","productname":"hello2"}}

          
          success: function (data) {
            console.log(self.ProductList());
              self.ProductList($.map(data, function (product) {
                 return new ProductDetailsViewModel(product);
            }));
          }
        });
      }
     self.GetProducts();
    }

    function ProductDetailsViewModel(data){
      var self = this;
      self.Name= ko.observable(data.name);
      self.PrdouctName= ko.observable(data.productname);
    }

    ko.applyBindings(new ProductViewModel());

  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js" charset="utf-8"></script>


  <h1 data-bind="foreach:ProductList">
     <div data-bind="text:Name"></div>
     <div data-bind="text:PrdouctName"></div>
  </h1>

提前致谢!

Answer 1

不要像这样使用您当前的解决方案:

$.map(data, function (product){
               self.ProductList.push(new ProductDetailsViewModel(product));
             })

仅仅因为它有效并不意味着它没问题。 当您转换数据以不同的顺序输出它们时，您应该使用 $.map。 在您的情况下，您应该使用 $.each，因为您希望将“每个”项目推送到数组中。

map 和 each 的工作方式相似，因为它们会迭代数组并对项目执行回调，但在语义方面，您应该始终使用正确的方法来表示您的实际意图。

如果我是你，我会这样做:

ko.utils.arrayForEach(data, function(p) {
       self.ProductList.push(new ProductDetailsViewModel(p));
});

需要注意的两个概念:

a) 学习和使用 knockouts 实用函数，它们在手并且优于 jquery 的替代品(据我所知)

b)您还应该注意如何更新您的列表，这取决于您要添加的项目的大小。如果您在每次回调中添加少量项目，上述内容就足够了。 另一方面，如果性能开始成为问题，您可以处理底层数组，并在数据插入结束时触发 knockout 更新!

这会像这样工作:

var underlyingArray = self.ProductList();
ko.utils.arrayForEach(data, function(p) {
       underlyingArray.push(new ProductDetailsViewModel(p));
});
self.ProductList.valueHasMutated();