转换为 KO JS 映射我的代码

Question

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

我最近遇到了一个问题，我想从我的转换器中获取特殊数据，然后用计算变量显示它。即使此代码不适用于我的视图模型，或者我需要应用插件：self.Converter = ko.observable(Converter);

这是我的 mainJS。

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>

我的数据看起来如何：

非常感谢您的帮助。

Answer 1

如果您要问如何使用 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);
});