녹아웃 매핑 개체에 작업 추가

Question

내 녹아웃 매핑 개체에 작업을 추가하는 데 어려움을 겪고 있습니다.

내가 지금 당장에있는 곳입니다. Knockout: Mapping API information을 따르려고합니다.

이 먼저 HTML입니다 :

<a href="#" id="AddContact" class="add-button" type="button" data-bind="click: addContact">+ Add Contact</a> 

<div id="ContactList"> 
    <table> 
     <thead> 
      <tr> 
       <th>ID</th><th>Name</th><th></th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: $root"> 
      <tr> 
       <td data-bind="text: ContactID"></td> 
       <td data-bind="text: DisplayName"></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

는 그리고이 넉 아웃을 배선에서 내 첫 번째 시도이다 : 나는 추가 인수 ({} 및 baseModel)에서를 제거하는 경우,

var baseModel = { 
    addContact: function() { 
     alert('Woo!'); 
    } 
}; 

contacts = ko.mapping.fromJS('[{"ContactID":6,"DisplayName":"Doe, John"},{"ContactID":7,"DisplayName":"Rogers, Mister"}]', { }, baseModel); 
ko.applyBindings(contacts); 

지금 ko.mapping.fromJS, 내 모든 데이터가 테이블에 올바르게 표시됩니다. 그러나 (예상대로) "연락처 추가"링크로 바인딩 오류가 발생합니다. baseModel을 다시 추가하면 "연락처 추가"링크를 클릭해도 작동하지만 데이터가 표시되지 않습니다. 나는 어떤 방법 으로든 오류를 얻지 못한다. 그래서 나는 거기에서 벌어지고있는 일에 대해 약간 혼란 스럽다.

저는 KO를 처음 접했기 때문에 뭔가 간단한 걸 놓치고 싶습니다. StackOverflow를 검색했지만이 시점에서 실제로 작동하는 것을보고 실제로 무슨 일이 일어나고 있는지 이해하지 못하도록 코드를 연결했습니다. 누군가가 몇 가지 추가 설명을하고 올바른 방향으로 나를 가리킬 수 있습니까? 감사.

Answer 1

ko.mapping.fromJS을 사용하고 있지만 객체/배열이 아닌 문자열을 전달 중입니다. fromJSON을 사용하거나 실제 배열을 전달하십시오.

또한 Bindings를 baseModel에 적용해야하며 연락처는 VM의 필드 여야합니다. 그러면 이상한 foreach: $root 대신 foreach: contacts을 사용할 수 있습니다. 이러한 변화와

참조 바이올린 : http://jsfiddle.net/antishok/kR4jc/3/

편집 - 당신의 코드를 사용하여 답을 업데이트 때문에 문제 자체에 서 있습니다.

자바 스크립트

var baseModel = { 
    addContact: function() { 
     alert('Woo!'); 
    } 
}; 

baseModel.contacts = ko.mapping.fromJSON('[{"ContactID":6,"DisplayName":"Doe, John"},{"ContactID":7,"DisplayName":"Rogers, Mister"}]'); 

ko.applyBindings(baseModel);​ 

HTML

<a href="#" id="AddContact" class="add-button" type="button" data-bind="click: addContact">+ Add Contact</a> 

<div id="ContactList"> 
    <table> 
     <thead> 
      <tr> 
       <th>ID</th><th>Name</th><th></th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: contacts"> 
      <tr> 
       <td data-bind="text: ContactID"></td> 
       <td data-bind="text: DisplayName"></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
</div>​