Convert to KO JS私のコードをマッピングする

Question

最近KnockoutJSで作業を始めました。私はCouchDBから自分のデータを表示するための簡単なアプリケーションを作っていました。私が気づいたのは、より多くのデータとより多くのネストされたデータがあれば、データをより柔軟にするためにマッピングプラグインを適用する必要があるということです。いくつかの質問と回答はこのプラグインについてですが、私はこのプラグインを既存のweb-appにどのように適用するのか分かりませんでした。

私は最近問題に遭遇しました。私は私のコンバータからスペシャルデータを取得し、計算された変数でそれを表示したかったのです。このコードは私のビューモデルには適用されません、または私はプラグインを適用する必要があります：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); 
});