녹아웃 매핑 - 키를 사용하여 중첩 된 객체를 고유하게 식별

Question

The Knockout mapping plugin documentation에는 "키"를 사용하여 객체를 고유하게 식별 할 수있는 섹션이 있습니다. 이 방법은 부분적으로 수정 된 객체의 모든 속성 표시를 완전히 바꾸는 대신 객체의 일부를 업데이트 한 다음 해당 부분 만 업데이트하는 방법을 설명합니다. 그것들은 간단한 예제에서 모두 훌륭하게 작동합니다. 여기서는 약간 더 질문을 명확하게하기 위해 수정했습니다. 내 수정 내용은 다음과 같습니다.

1. 2 초 후에 수정 된 이름으로 개체를 바꿉니다.

2. 디스플레이의 변경되지 않은 부분을 강조 표시하여 업데이트가 발생할 때 실제로 교체되지 않는 것을 볼 수 있습니다.

1. 간단한 객체 (jsFiddle)

<h1 data-bind="text: name"></h1> 
<ul data-bind="foreach: children"> 
    <li><span class="id" data-bind="text: id"></span> <span data-bind="text: name"></span></li> 
</ul> 

<script> 
var data = { 
    name: 'Scot', 
    children: [ 
     {id : 1, name : 'Alicw'} 
    ] 
}; 
var mapping = { 
    children: { 
     key: function(data) { 
      console.log(data); 
      return ko.utils.unwrapObservable(data.id); 
     } 
    } 
}; 
var viewModel = ko.mapping.fromJS(data, mapping); 
ko.applyBindings(viewModel); 

var range = document.createRange(); 
range.selectNode(document.getElementsByClassName("id")[0]); 
window.getSelection().addRange(range); 

setTimeout(function() { 
    var data = { 
     name: 'Scott', 
     children: [ 
      {id : 1, name : 'Alice'} 
     ] 
    }; 
    ko.mapping.fromJS(data, viewModel); 
}, 2000); 
</script> 

그러나 나에게 분명하지 않다 내가 더 복잡한 중첩 된 데이터 구조에 대해 동일한 동작을 달성 할 방법이다. 다음 예제에서는 위 코드를 가져 와서 목록에 데이터를 래핑했습니다. 위와 동일하게 행동하고 싶지만 그렇지 않습니다. 하나의 속성이 변경되어 전체 디스플레이가 다시 표시됩니다. 위의 예제와 달리 데이터를 업데이트 한 후에는 강조 표시가 손실되기 때문에이를 볼 수 있습니다.

2. 더 복잡한 중첩 된 객체 내가 더 중첩 된 데이터 구조 주어진 첫 번째처럼 두 번째 예제 작업을 할 수있는 방법 (jsFiddle)

그래서 기본적으로 내가되어 부탁 해요 무엇

<!-- ko foreach: parents --> 
    <h1 data-bind="text: name"></h1> 
    <ul data-bind="foreach: children"> 
     <li><span class="id" data-bind="text: id"></span> <span data-bind="text: name"></span></li> 
    </ul> 
<!-- /ko --> 

<script> 
var data = { 
    parents: [ 
     { 
      name: 'Scot', 
      children: [ 
       {id : 1, name : 'Alicw'} 
      ] 
     } 
    ] 
}; 
var mapping = { 
    children: { 
     key: function(data) { 
      console.log(data); 
      return ko.utils.unwrapObservable(data.id); 
     } 
    } 
}; 
var viewModel = ko.mapping.fromJS(data, mapping); 
ko.applyBindings(viewModel); 

var range = document.createRange(); 
range.selectNode(document.getElementsByClassName("id")[0]); 
window.getSelection().addRange(range); 

setTimeout(function() { 
    var data = { 
     parents: [ 
      { 
       name: 'Scott', 
       children: [ 
        {id : 1, name : 'Alice'} 
       ] 
      } 
     ] 
    }; 
    ko.mapping.fromJS(data, viewModel); 
}, 2000); 
</script> 

? id가 각 자식마다 고유하다고 가정 할 수 있습니다 (따라서 Scott 외에 다른 부모를 추가하면 그의 자식은 id = 2 등으로 시작합니다).

Answer 1

재미있는 관찰과 멋진 글쓰기. 부모뿐만 아니라 자식에게도 키를 정의하면 작동하는 것처럼 보입니다. 이 바이올린을보십시오 : 그것은 부모의 생성자는 자식 매핑을 수행하는 부모와 자녀를위한 인스턴스화 뷰 모델의 기능을 정의

http://jsfiddle.net/8QJe7/6/

.