Convertir en KO JS Mapper mon code

Question

J'ai récemment commencé à travailler avec KnockoutJS et j'ai réussi à faire une application simple pour montrer mes données de CouchDB. Ce que j'ai remarqué est que si j'ai plus de données et plus de données imbriquées j'ai besoin d'ajouter le plugin de cartographie afin de rendre mes données plus flexibles. Quelques questions et réponses ici sont à propos de ce plugin mais je ne savais pas comment appliquer ce plugin sur mon application web existante.

Je suis récemment venu à un problème, je voulais obtenir les données specdial de mon convertisseur, puis montrer avec une variable calculée. Même ce code ne s'applique pas avec mon modèle de vue ou j'ai besoin d'appliquer le plugin: self.Converter = ko.observable(Converter);

Alors voici mon 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); 

Et mon avis:

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

Comment mes données ressemble:

J'apprécie vraiment l'aide.

Answer 1

SI vous demandez comment utiliser la cartographie KO, il serait:

au lieu de

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

il deviendrait:

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