【问题标题】:Knockout Observable Array Changes after push推送后淘汰可观察数组更改
【发布时间】:2018-05-30 20:00:48
【问题描述】:

我正在像这样将项目推入一个可观察的数组中

var self = this;  
self.myArrayIwanttoAddTo = ko.observableArray([]);

self.myObjectIAmPushing = { 
 item1:ko.observable(),
 item2: ko.observable()
  }

  self.AddItemToUpdate = function (data) {
 self.myArrayIwanttoAddTo.push( new ko.observableArray([data]));
 }   

 self.AddMyData = function() {
  self.AddItemToUpdate(myObjectIAmPushing);
   self.myObjectIAmPushing.item1("");
   self.myObjectIAmPushing.item2("");
  }

我也试过push(data)

我第一次可以添加,但是当我清除对象的所有属性并将其添加到我想要添加的数组时,会将值更改为第二次推送的值

所以第一次推送看起来像这样 = {item1: 'A', item2: 'B'} 当我清除所有属性并再次添加时,我得到了

{item1: 'C', item2:'D'},{item1: 'C', item2:'D'}

*感谢@Jason Spake 的回复更新

我得到以下工作就像这样

   self.AddItemToUpdate = function(data){
 function myObjecttoPush(item1,item2){
this.item1 = item1;
this.item2 = item2;
}
 var data2 = ko.toJS(data);
var items = new myObjecttoPush(data2.item1, data2.item2)
self.myArrayIwanttoAddTo.push(new myObjecttoPush(items.item1, items.item2));

我不知道这是正确的方法,但它有效吗?

我仍然有兴趣学习更好的方法。

【问题讨论】:

  • 您正在使用对同一对象的多个引用填充数组,因此更新该对象的属性将更新数组中引用该对象的两个位置。你为什么要重用对象而不是每次都创建一个新对象?
  • 如何创建一个新对象?你能告诉我你会如何回答吗?

标签: knockout.js


【解决方案1】:

如果没有上下文,我无法确定您的代码的哪些部分是相关的,因此这可能是一个过于简化的示例。在 javascript 中有几种不同的方法可以创建一个新对象。此示例使用对象初始值设定项({...} 语法)。更多选项请参见Working_with_Objects

function viewModel(){
  var self = this;  
  self.myArray = ko.observableArray([]);
  self.myArray.push({item1: "A", item2: "B"});

  self.AddMyData = function() {
    self.myArray.push({
      item1: ko.observable("C"),
      item2: ko.observable("D")
    });
  }
  
}

ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<span data-bind="text: ko.toJSON(myArray)"></span>
<br/>
<input type="button" data-bind="click: AddMyData" value="Add C,D" />

【讨论】:

  • 这很有帮助你能看看我的编辑吗?
  • @LeonardoTrimarchi 如果您显示更多代码,我可以提供一些更好的建议。代码现在的样子对我来说没有多大意义,但我不知道这是因为它需要改进还是因为我缺少拼图的部分。
猜你喜欢
  • 2017-09-02
  • 2018-03-30
  • 2012-09-08
  • 1970-01-01
  • 2015-10-05
  • 2015-01-25
  • 2013-05-01
  • 1970-01-01
相关资源
最近更新 更多