Javascript 转换为KO JS映射我的代码

我最近开始使用KnockoutJS，并设法制作了一个简单的应用程序来显示来自CouchDB的数据。我注意到的是，如果我有更多的数据和更多的嵌套数据，我需要应用映射插件，以使我的数据更灵活。这里有一些关于这个插件的问题和答案，但我不知道如何在我现有的web应用程序上应用这个插件

我最近遇到了一个问题，我想从转换器中获取specdial数据，然后用计算变量显示它。即使这段代码不适用于我的视图模型，或者我需要应用插件：

self.Converter=ko.observable（Converter）

这是我的主语

function ViewModel() {
    var self = this;
    self.myfield =  ko.observableArray([]);
    self.investigator = ko.observableArray([]);
    self.preparatorInfos = ko.observableArray([]);
    self.enumInfos = ko.observableArray([]);

    //self.Converter = ko.observable(Converter);
    //self.Converter = ko.observable(data.Converter);

    self.selectDivs = ko.observableArray(['Properties', 'Implements']);
    self.selectedDiv = ko.observable();

    self.selectDivs2 = ko.observableArray(['Properties', 'Requires']);
    self.selectedDiv2 = ko.observable();

  }
 var db = new PouchDB('http://localhost:5984/helloworld');

  var vm = new ViewModel();


  db.query("bricksetup/docs").then(function(result) {
    var data = result;
    console.log(data);
    vm.myfield(data.rows);
  });
  db.query("InvestigatorInfos/docs").then(function(result) {  
    var data = result;
    console.log(data);
    vm.investigator(data.rows);
  });

  db.query("PreparatorInfos/docs").then(function(result) { 
    var data = result;
    console.log(data);
    vm.preparatorInfos(data.rows);
  });

  db.query("EnumInfos/docs").then(function(result) { 
    var data = result;
    console.log(data);
    vm.enumInfos(data.rows);
  });

  ko.applyBindings(vm);

我的看法是：

 <!-- BRICKINFOS -->
      <div id="tab1" class="col s12">
        <ul class="collapsible" data-collapsible="accordion" data-bind="foreach:myfield">
            <li  data-bind="with: value">
              <div class="collapsible-header">
                <i class="material-icons">view_stream</i>
                <p class="blue-text" data-bind="text: TypeName"></p>
              </div>
                <div class="collapsible-body"> 
                  <p class="style_p_row" ><b>AssemblyName:</b> <span data-bind="text: AssemblyName"></span></p>
                  <!-- ko if: Description -->
                   <p class="style_p_row" ><b>Description:</b> <span data-bind="text: Description"></span></p>
                  <!-- /ko -->
                  <p class="style_p_row" ><b>Name: </b><span data-bind="text: Name"></span></p>
                  <p class="style_p_row" ><b>Obsolete: </b><span data-bind="text: Obsolete"></span></p>
                  <p class="style_p_row" ><b>TypeName: </b><span data-bind="text: TypeName"></span></p>

                   <div class="row">
                      <form class="col s12">
                            <div class="row">
                              <div class="col s12 m12">
                                <div class="col s12 m4 padding_select">
                                  <select class="browser-default " 
                                  data-bind="options: $root.selectDivs,
                                            value: $root.selectedDiv,
                                            optionsCaption: 'Choose'">
                                  </select>
                                </div><!-- end col s6 -->
                                <div class="col s6 m6" >
                                   <div data-bind="visible: $root.selectedDiv() == 'Properties'" id="Properties">
                                   <!-- ko if: Properties.Properties == ''-->
                                     <p class="blue-text padding_p">Properties</p>is nothing set
                                   <!-- /ko -->
                                   <!-- ko ifnot: Properties.Properties == ''-->
                                    <p class="blue-text padding_p">Properties</p>
                                    <ul data-bind="foreach: Properties.Properties">
                                      <li class="space_bottom">  
                                      <b>Name:</b> <span data-bind="text: Name"></span></br>        
                                      <b>Converter: </b><span class="converter_class" data-bind="text: converterNames[Converter]"></span></br>      
                                      <b>Validation Type: </b><span class="validation_class" data-bind="text:validationName[ValidationType] "></span></br>
                                      <!-- ko if: EnumTypeName -->
                                      <b>EnumType: </b><span class="validation_class" data-bind="text: EnumTypeName"></span></br>
                                      <!-- /ko -->
                                      <!-- ko if: Description -->
                                      <b>Description: </b><span class="validation_class" data-bind="text: Description"></span></br>
                                      <!-- /ko -->
                                      </li>
                                    </ul>
                                    <!-- /ko -->
                                  </div>
                                  <div data-bind="visible: $root.selectedDiv() == 'Implements'" id="Implements">
                                    <p class="blue-text padding_p">Implements Interfaces</p>
                                    <ul data-bind="foreach: Implements.Interfaces">
                                      <li><b>TypeName:</b> <span data-bind="text: $data.TypeName"></span><br></li>
                                    </ul> 
                                  </div>
                                </div>
                                </div><!-- end col s6 -->
                              </div>
                            </div> 
                      </form>
                    </div><!-- end row -->
                </div>
            </li>
        </ul>
      </div>




查看流

组件名称：

描述：

名称：

过时：
类型名称：

属性未设置
属性



名称：

转换器：

验证类型：

枚举类型：

说明：



实现接口

类型名称：





我的数据外观：


非常感谢您的帮助。
如果您询问如何使用KO映射，请回答：

而不是

db.query("PreparatorInfos/docs").then(function(result) { 
    var data = result;
    console.log(data);
    vm.preparatorInfos(data.rows);
});

它将成为：

db.query("PreparatorInfos/docs").then(function(result) { 
    var data = result;
    ko.mapping.fromJS(data, {}, vm.preparatorInfos);
});

我也试过这样做：
self.converter=ko.observable（converter）没有成功我不清楚你在问什么，一点也不清楚，因为有很多代码可能与问题无关。有关编辑问题的帮助，请参阅。我想将映射插件应用于我现有的ViewModel，但这与我的评论没有任何关系。我说的是所有与问题无关的代码，例如所有那些类、额外的可观察对象、复杂的引导助手元素、couchdb查询等等。你不能就这样扔掉未清理的代码，然后期望志愿者在IMHO中费力地完成整件事。