Question

我现在面临着一个问题。我有一个包含对象列表的可观察数组。每当我更新数组的任何对象的属性时，它都没有反映在浏览器上。我使用了所有的淘汰功能，如替换，删除。但是更新会出现在可观察数组中，但不会出现在浏览器中。

以下是我的问题示例：

 var ViewModel=new {
     self=this;
     self.List=ko.observableArray([]); 
              }
     $(function(){
       ko.applyBinding(ViewModel); 
    }) 
    $.post('/url',{},function(data){
        ViewModel.List(data); //data is list having 4 property having CommentList as again object-->id,title,description,CommentList--->commenttitle,commentdescription
      })  
    //During change of property of commentList
    $.post('/updateComment',{},function(obj){//Here obj-->obj.Commenttitle="some title",obj.commentdescription='some description'
       //Let say there require update 4th object of List and  2nd property of CommentList
         ViewModel.AnswerList()[4].CommentList.splice(2,1,obj);

     })
    //But nothing updation on browser

Answer 1

你说：

每当我更新数组的任何对象的属性时，它都不是反映在浏览器上。

可观察数组中对象的属性也需要设置为ko.observable，以便自动更新UI。

例如：

var anObservableArray = ko.observableArray([    
  { name: "A", type: "Type A" }    
]);

// some later point
anObservableArray()[0].name = "B";

不更新您的用户界面，因为name不是可观察的。

然而，

var anObservableArray = ko.observableArray([    
  { name: ko.observable("A"), type: ko.observable("Type A") }    
]);

// some later point
anObservableArray()[0].name("B");

..会更新您的UI以显示名称B，因为name是一个可观察的。

编辑:(代码被添加到问题后）

所以从您的代码中得到：

 answer=GetAnswerFromViewModel(parentcourseItemID); 
 answer.CommentCount--;                     
 answer.CommentList.splice(CommentIndex,1); 
 answer.CommentText='';

假设GetAnswerFromViewModel返回具有可观察属性的答案，您应该写：

 answer=GetAnswerFromViewModel(parentcourseItemID); 
 answer.CommentCount(answer.CommentCount()--);                     
 answer.CommentList.splice(CommentIndex,1); 
 answer.CommentText('');

如果您的答案中的属性不是可观察的，那么您的UI将不会更新。

已完成对可观察数组内对象的更新，但浏览器上没有更改

1 个答案: