KnockoutJS映射不是

Question

我有一個診斷代碼數組viewmodel。在我的html中，我有一個按鈕數據綁定到點擊，添加一個空白的診斷代碼到數組。這一切都有效。

我使用按鈕添加診斷代碼。這工作。

我從外部源接收JSON，然後試圖將它包裝在可觀察對象中。因爲它來自外部來源，它沒有我可以綁定的函數，所以我綁定到不屬於viewModel的函數。

當我嘗試將對象轉換回JSON字符串時，新的診斷代碼爲空字符串（新代碼時添加的默認值）。

下面的代碼：

<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> 

因此，舉例來說，如果我點擊添加，然後輸入代碼ABCD，然後調用submitJSON，我看到：

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

我期待

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

更新：它看起來像映射插件將簡單類型（字符串，整數等）的數組轉換爲觀察vables而不是observableArrays。所以我修改了（用pax的幫助）javascript調用映射之前，將字符串數組轉換爲持有字符串的對象數組。然後，當轉換成JSON，將它們轉換回：

<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/）：

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：

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。你仍然希望使用它，讓我知道。