Konvertieren in KO JS Mapping meines Codes

Question

Ich habe vor kurzem angefangen mit KnockoutJS zu arbeiten und ich habe es geschafft, eine einfache App zu machen, um meine Daten von CouchDB zu zeigen. Was ich bemerkt habe, ist, wenn ich mehr Daten und mehr verschachtelte Daten habe, muss ich das Mapping Plugin anwenden, um meine Daten flexibler zu machen. Einige Fragen und Antworten hier sind über dieses Plugin, aber ich wusste nicht, wie man dieses Plugin auf meine bestehende Web-App anwendet.

Ich kam vor kurzem zu einem Problem, ich wollte die spezifischen Daten von meinem Konverter bekommen und dann zeigen Sie es mit einer berechneten Variable. Auch dieser Code gilt nicht für mein View-Modell oder ich muss das Plugin anwenden: self.Converter = ko.observable(Converter);

Also hier ist mein 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); 

Und meine Ansicht:

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

Wie kann ich meine Daten aussieht:

ich wirklich die Hilfe zu schätzen wissen.

Answer 1

Wenn Sie sich fragen, wie KO-Mapping zu verwenden, wäre es:

statt

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

es würde:

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