Knockout JS：替换多维数组中的特定字段值

Question

我想替换多维数组中的特定字段值。我试着用replace函数来替换它。

但是，语法结构可能有问题。所以，我不能替换它。

当我检查我的 ko 可观察数组时，下面的数组显示在控制台中。

0 : {id: "1", title: "IT Manager", "description" : "description 1"}
1 : {id: "2", title: "Manager", "description" : "description 2"}

我想像在 1 索引数组中那样动态更改值想从 description 2 更改为 description 3.

在 keyup 上，我调用下面的函数并获取当前父数据：

changeQty : function(itemIndex){

                self.displayProductData.splice(4,self.displayProductData()[itemIndex.id], newQtyVal);

            },

怎么做？

请帮帮我。

Answer 1

如果您尝试替换可观察数组中对象的特定属性，它将不起作用，因为这些属性本身不是可观察的。

您有 2 个选择：

使每个可以更新的对象的每个属性成为可观察对象。如果您选择此选项，请阅读 this question.
替换整个对象本身。

您提到替换无效。你是这样做的吗？

var viewModel = function(){
  var self = this;
  
  //demo
  var itemIndex = {
    id:1
  }
  
  self.displayProductData = ko.observableArray([
    {id: 0, description: 'desc 1'},
    {id: 1, description: 'desc 2'}
  ]);
  self.replaceObject = function(data, event){
    var oldObject = self.displayProductData().find(function(arrayObject){ 
        return data.id === arrayObject.id; 
      });
    var newObject = Object.assign({}, oldObject);
    newObject.description = "replace method desc";
    self.displayProductData.replace(oldObject, newObject);
  };
  
  self.replaceObjectWithSplice = function(data, event){
    var oldObject = self.displayProductData().find(function(arrayObject){ 
      return data.id === arrayObject.id; 
    });
    var newObject = Object.assign({}, oldObject);
    newObject.description = "splice desc";
    self.displayProductData.splice(data.id, 1, newObject);
  };
};

ko.applyBindings(new viewModel());

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



<ul data-bind="foreach: displayProductData">
    <li>
      <span data-bind="text: id"></span>, 
      <span data-bind="text: description"></span>
      <button data-bind="click: $parent.replaceObject">Replace</button>
      <button data-bind="click: $parent.replaceObjectWithSplice">Splice</button>
    </li>
</ul>

注意：如果您要替换大量数据，我的回答并不是最有效的方法 - 每次创建新对象都需要额外的内存。

编辑：根据评论，我已将按钮移至 foreach 循环内，以表明当您从 Knockout 对象（在本例中为 displayProductData）中调用函数时，该函数会自动获取当前行数据，以及 event.

Knockout JS：替换多维数组中的特定字段值

Knockout JS : replace specific field value in multi dimentional array

javascript

jquery

knockout.js