ObservableArray가 항목이 변경된시기를 알리지 않음

Question

내 페이지의 observableArray에 div을 바인딩하려고합니다. 모든 사항이 정상입니다. 이 배열에는 JSON 객체 (관찰 할 수 없음)가 포함되어 있으며 WebService에서 가져옵니다.

그런 다음 배열에서 해당 개체를 수정할 수 있기를 원하며 각 수정시 뷰를 새로 고침하고 싶습니다. 예를 들어, 체크 박스가 클릭되면, 내 JSON 객체의 플래그를 변경하고 싶습니다 (자동으로 올바르게 작동하는 것처럼 보입니다). 동시에 UI가 업데이트되지 않으면 안됩니다. 누구든지 그 이유를 제공 할 수 있습니까? (왜냐하면 그러한 객체는 간단하고 관찰 할 수 없기 때문입니까?) 및 솔루션입니까? 무슨 일이 일어나고 무엇

var DocumentContentModel = function() { 
     var self = this; 
     self.content = ko.observableArray(); 
     self.ElementApprovalChanged = function (element) { 
      DocumentService.DoSomething(
       element.Id, 
       function (result) { 
        if (!result) { 
         var negatedApproved = !element.Approved; 
         element.Approved = negatedApproved; 
        } 
       }, 
       function (error) { 
        alert(error); 
       }); 
      return true; 
     }; 
    }; 

    $(document).ready(function() { 
     var contentModel = new ContentModel(); 
     DocumentService.GetContent(1, 
     function (result) { 
      contentModel.content(JSON.parse(result)); 
     }); 

     ko.applyBindings(contentModel); 
    }); 

UI

<div class="ContentContainer"> 
    <div data-bind='foreach: content'> 
     <div class="ContentElement" data-bind='css: { NotApproved: !Approved} '> 
      <div class="ContentValue" data-bind='html: Value'></div> 
      <div class="Approval"> 
       <input type="checkbox" data-bind='checked: Approved, click: $root.ElementApprovalChanged' /> 
      </div> 
     </div> 
    </div> 
</div> 

내가 웹 서비스에 요청을 전송하고이 호출이 false를 반환하는 경우 내가 요소의 Approved 플래그를 재설정 할 체크 박스를 클릭에 있습니다. 체크 박스를 선택해도 div 클래스 속성을 변경하면 필요시 NotApproved으로 표시됩니다. 그러나 이런 일은 일어나지 않습니다.

Answer 1

observableArray는 배열을 추적합니다. 따라서 어떤 것이 배열에서 추가, 제거 또는 대체되면 뷰에 대한 업데이트가 트리거됩니다.

observableArray는 배열의 항목에있는 개별 속성의 상태를 추적하지 않습니다. 따라서 개체에 Approved 플래그가있는 경우 해당 속성의 변경 사항을 반영하기 위해 UI에 대해 관찰 가능해야합니다.

그래서 당신은 뭔가를 할 것이다 :

element.Approved = ko.observable(false); 
.... 
.... 

if (!result) {       
    var negatedApproved = !element.Approved();       
    element.Approved(negatedApproved);      
} 

(또는 더 consise 수 있도록하려면 :

element.Approved(!element.Approved()); 

)