KnockoutJS 매핑이 없습니다

Question

진단 코드 배열이있는 viewmodel 있습니다. 내 html에는 배열에 빈 진단 코드를 추가하는 클릭에 데이터 바인딩 된 단추가 있습니다. 이것은 모두 작동합니다.

버튼을 사용하여 진단 코드를 추가합니다. 이 작동합니다.

외부 소스에서 JSON을 수신하고 관찰 가능으로 랩하려고합니다. 외부 소스에서 왔기 때문에 바인딩 할 수있는 함수가 없으므로 viewModel의 일부가 아닌 함수에 바인딩됩니다.

개체를 JSON 문자열로 다시 변환하려고하면 새 진단 코드는 빈 문자열 (새 코드가 추가 될 때 기본값)이됩니다. 내가 submitJSON 추가를 클릭하고 코드 ABCD를 입력 한 다음 호출하는 경우

가

<h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3> 
    <div data-bind="foreach:DiagnosisCodes"> 
     <div><input type="text" data-bind="value:$data"/><input type="button" value="Remove" data-bind="click: function(data, event) { RemoveDiagnosisCode($parent, data, event) }"/> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     function AddDiagnosisCode(item) 
     { 
      item.DiagnosisCodes.push(""); 
     } 

     function RemoveDiagnosisCode(item, code) { 
      item.DiagnosisCodes.remove(code); 
     } 

     function submitJSON() { 
      var test= ko.mapping.toJSON(viewModel); // have also tried ko.toJSON(viewModel) 
      alert(test); 
     } 

     var vm = { 
      "DiagnosisCodes": ["2345","6789"] 
     }; 

     var viewModel = ko.mapping.fromJS(vm);  
     ko.applyBindings(viewModel); 
    </script> 

그래서 예를 들어, 내가 볼 :

{ 
    DiagnosisCodes:["2345","6789",""] 
} 

내가

{ 
    DiagnosisCodes:["2345","6789","ABCD"] 
} 

을 기대하고 여기에

코드입니다

업데이트 : 매핑 플러그인이 간단한 유형 (문자열, 정수 등)의 배열을 관측 값으로 변환하는 것처럼 보입니다. observableArrays 대신 vables. 그래서 자바 스크립트를 수정하여 (pax의 도움으로) 매핑을 호출하기 전에 문자열 배열을 문자열을 보유한 객체의 배열로 변환했습니다. 그런 다음, JSON으로 변환 다시 변환 할 때 :

HTML :

<button data-bind="click:submitJSON">submit json</button> 
<h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3> 
    <div data-bind="foreach:DiagnosisCodes"> 
     <div><input type="text" data-bind="value:code"/><input type="button" value="Remove" data-bind="click: $root.RemoveDiagnosisCode"/> 
     </div> 
    </div> 

JS 코드 몇 가지 문제가

<h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3> 
    <div data-bind="foreach:DiagnosisCodes"> 
     <div><input type="text" data-bind="value:code"/><input type="button" value="Remove" data-bind="click: $root.RemoveDiagnosisCode"/> 
     </div> 
    </div> 
<button onclick="submitJSON()">Show</button> 

function submitJSON() { 
      //convert to JS object first 
      var test= ko.mapping.toJS(viewModel); 
      UnMapCodes(test); 

      alert(ko.toJSON(test)); 
     } 

      function Code(code) 
     { 
      var self=this; 
      self.code = code; 
     } 

     function MapToCodes(obj) 
     { 
      var codes=[]; 

      for(var c=0; c<obj.DiagnosisCodes.length; c++) 
      { 
       codes.push(new Code(obj.DiagnosisCodes[c])); 
      } 

      obj.DiagnosisCodes=codes; 
     } 

     function UnMapCodes(obj) 
     { 
      var codes=[]; 

      for(var c=0; c<obj.DiagnosisCodes.length; c++) 
      { 
       codes.push(obj.DiagnosisCodes[c].code); 
      } 

      obj.DiagnosisCodes=codes; 
     } 


     var vm = {    
      "DiagnosisCodes": ["2345","6789"] 
     }; 

     vm.AddDiagnosisCode= function (item) 
      { 
       self=this; 
       self.DiagnosisCodes.push(new Code("")); 
      }; 
     vm.RemoveDiagnosisCode= function (code) { 
       self=this; 
       self.DiagnosisCodes.remove(code); 
      }; 

     MapToCodes(vm); 

     var viewModel = ko.mapping.fromJS(vm);  
     ko.applyBindings(viewModel); 

Answer 1

했다, 그것을 조금 (: http://jsfiddle.net/VX9f2/2/ 바이올린) 구조 조정 :

var Code = function(code){ 
    var self = this; 
    self.code = ko.observable(code); 
} 

var VM = function(){ 
    var self = this; 
    self.DiagnosisCodes = ko.observableArray([ 
     new Code("2345"), 
     new Code("6789")]); 
    self.AddDiagnosisCode = function() { 
     self.DiagnosisCodes.push(new Code("")); 
    } 

    self.RemoveDiagnosisCode = function(item) { 
     self.DiagnosisCodes.remove(item); 
    } 

    self.submitJSON = function() { 
     var test= ko.mapping.toJSON(self.DiagnosisCodes); // have also tried ko.toJSON(viewModel) 
     alert(test); 
     } 

} 
     //var viewModel = ko.mapping.fromJS(new VM());  
     ko.applyBindings(new VM()); 

명확하게하기 위해 나는 초기 ko.mapping 사용법을 구조 ors. 그래도 사용하고 싶다면 알려주세요.