无法使用映射插件映射数据？敲击

Question

我想绑定我的数据来查看，但我在所有的尝试中都不成功。

有一个数据的数组我存储在一个变量中，后来使用映射插件，我将它们作为observable's来绑定它来查看。

这里比较有意思的事情是我得到没有错误的console和我一起

<span data-bind="text: ko.toJSON(Item)"></span> 

检查我可以看到我的阵列，但我不能看到它绑定到查看。

Script代码：

console.log(ko.mapping.fromJS(jsonData)); 
var viewModel = new MainModel(); 
viewModel.Item(ko.mapping.fromJS(jsonData)); 
ko.applyBindings(viewModel); 

小提琴链接Here。

这是我在映射插件上的第一个线索。请建议我使用映射插件来构建一些复杂的东西。

如果是，建议使用更好的方法。

Answer 1

我不记得了，但它跟我问两天回来的问题是一样的。

我想如果你想要类似的问题，我已经解决了它，你可以在你的更新的小提琴上找到它。我还更新了淘汰赛版本到3.2.0。

http://jsfiddle.net/C46pU/9/

var mapping = { 
    'Items': { 
     create: function(options) { 
      console.log('Inside Mapping Item'); 
      return new ChildModel(options.data); 
     } 
    }, 
    'Value': { 
     create: function(options){ 
        console.log('Inside Mapping Value'); 
        return new ChildModel(options.data); 
     } 
     } 
}; 

$(document).ready(function() { 

      var jsonData = {"Items":[{"Value":[{"Value1":"1","Value2":"2"},{"Value1":"3","Value2":"4"}]},{"SelectedOption":["Item2"],"Value":[{"Value1":"5","Value2":"6"},{"Value1":"7","Value2":"8"},{"Value1":"9","Value2":"10"}]}]}; 

     var viewModel = new MainModel(jsonData);      
     ko.applyBindings(viewModel);       
     }); 

     function ValueModel() { 
      var self = this; 
      self.Value1 = ko.observable(); 
      self.Value2 = ko.observable(); 
     } 

     function ChildModel(data) { 
      var self = this; 
      self.SelectedOption = ko.observable(); 
      self.Value = ko.observableArray([]); 
      if(data != null) 
      { 
       console.log(data); 
       ko.mapping.fromJS(data,mapping,self); 
      } 
      self.AddValue = function() { 
       self.Value.push(new ValueModel()); 
      } 
     } 


     function MainModel(data) { 
      var self = this;    
      self.Items = ko.observableArray([]); 
      if(data != null) 
      { 
       console.log('Inside Main Model'); 
       console.log(data); 
       ko.mapping.fromJS(data,mapping, self); 
      }   

      self.dropDownItem = ko.observableArray(['Item1', 'Item2', 'Item3', 'Item4']); 

      self.AddItem = function() { 
       self.Items.push(new ChildModel()); 
      } 
     } 

Answer 2

我已经修改了你的小提琴，添加了“映射”defenition和一些其他更改（我害怕失去的来源，因此我张贴在这里）。

最主要的是

var mapping = { 
    'Item': { 
     create: function(options) { 
      return new ChildModel(options.data); 
     } 
    } 
} 

其中映射插件将被强制使用特定对象的创建功能，然后反序列化的cild模型。

标记：

<h2>Nested</h2> 
<table cellpadding="10" cellspacing="5" style="padding:10px;"> 
    <tbody data-bind="foreach: Item"> 
    <tr > 
     <td> 
      <select data-bind="options: $root.dropDownItem, selectedOptions: $data.SelectedOption && SelectedOption() || ''"></select> 
     </td> 
     <td> 
      <input type="button" data-bind="click: AddValue" value="Add Value" /> 
     </td> 
     <td> 
      <table data-bind="foreach: Value"> 
       <tr> 
        <td><input type="text" data-bind="value: Value1" /></td> 
        <td><input type="text" data-bind="value: Value2"/></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<div> 
    <input type="button" value="Add Item" data-bind="click: AddItem" /> 
</div> 
<div> 
    <span data-bind="text: ko.toJSON(Item)"></span> 
</div> 

代码：

$(document).ready(function() { 

      var jsonData = {"Item":[{"Value":[{"Value1":"1","Value2":"2"},{"Value1":"3","Value2":"4"}]},{"SelectedOption":["Item2"],"Value":[{"Value1":"5","Value2":"6"},{"Value1":"7","Value2":"8"},{"Value1":"9","Value2":"10"}]}]}; 
var mapping = { 
    'Item': { 
     create: function(options) { 
      return new ChildModel(options.data); 
     } 
    } 
} 
    var viewModel = new MainModel(); 
      viewModel.Item(ko.mapping.fromJS(jsonData, mapping).Item()); 
ko.applyBindings(viewModel);  

     }); 

     function ValueModel() { 
      var self = this; 
      self.Value1 = ko.observable(); 
      self.Value2 = ko.observable(); 
     } 

     function ChildModel() { 
      var self = this; 
      self.SelectedOption = ko.observable(); 
      self.Value = ko.observableArray([new ValueModel()]); 

      self.AddValue = function() { 
       self.Value.push(new ValueModel()); 
      } 
     } 


     function MainModel() { 
      var self = this;    
      self.Item = ko.observableArray([]); 

      init(); 

      function init() { 
       self.Item.push(new ChildModel());     
      } 

      self.dropDownItem = ko.observableArray(['Item1', 'Item2', 'Item3', 'Item4']); 

      self.AddItem = function() { 
       self.Item.push(new ChildModel()); 
      } 
     } 

希望，它帮助。