KnockoutJSで検索するフィルタ

Question

私はWebアプリケーションで検索フィルタを実装しようとしています。私は良い記事を読んで、良いJsfiddlesを見つけました。

TypeNameで検索し、そのタイプ名の行を表示したいと考えています。 私は私のモデルでそれを実現したが、私が検索したとき、私が取得し、エラー： main.js:48 Uncaught TypeError: item.TypeName is not a functionも画面error

私のindex.html：

<div class="form"> 
    <div class="form-group"> 
      <input type="search" class="form-control" data-bind="textInput: query" autocomplete="off" /> 
     </div> 
    </div> 

    <div id="tab1" class="col s12"> 
     <ul class="collapsible" data-collapsible="accordion" data-bind="foreach:brickInfos"> 
      <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> 
      </li> 
     </ul> 
    </div> 

マイモデル：

function ViewModel() { 
    var self = this; 
    self.brickInfos = ko.observableArray([]); 

    db.query("BrickInfos/docs").then(function(result) { 
    var data = result; 
    console.log(data); 
    self.brickInfos(data.rows); 
    }); 

    self.query = ko.observable(""); 
    self.filteredBrickInfos = ko.computed(function() { 
     var filter = self.query().toLowerCase(); 

     if (!filter) { 
      return self.brickInfos(); 
     } else { 
      return ko.utils.arrayFilter(self.brickInfos(), function (item) { 
       return item.data.TypeName().toLowerCase().indexOf(filter) !== -1; 
      }); 
     } 
    }); 
} 

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



    ko.applyBindings(vm); 

これがあると私のデータの見方：Json data on console

私のコードをどのように構造化すべきかいつも歓迎です、私はKnockoutJSで新しいです。あなたが取得している

{ 
    "BrickInfos": { 
         "BrickInfos": [ 
              { 
               "Properties": { 
                   "Properties": [ 

                       ] 
                  }, 
               "Implements": { 
                   "Interfaces": [ 
                        { 
                         "TypeName": "soemtypename" 
                        }, 
                        { 
                         "TypeName": "soemtypename2" 
                        } 
                       ] 
                  }, 
               "Name": "AccessBareBoneApp", 
               "Description": "", 
               "TypeName": "soemtypename", 
               "AssemblyName": "string other safasgfas", 
               "Obsolete": true 
              }, 
              { 
               "Properties": { 
                   "Properties": [ 
                        { 
                         "Name": "file", 
                         "Description": "asfasf", 
                         "ValidationType": 12, 
                         "Converter": 12, 
                         "EnumTypeName": "string1" 
                        } 
                       ] 
                  }, 
               "Implements": { 
                   "Interfaces": [ 
                        { 
                         "TypeName": "soemtypename" 
                        }, 
                        { 
                         "TypeName": "soemtypename" 
                        } 
                       ] 
                  }, 
               "Name": "File2", 
               "Description": "asfasfas", 
               "TypeName": "soemtypename", 
               "AssemblyName": "string other safasgfas", 
               "Obsolete": false 
              } 
              ] 
             } 
             } 

Answer 1

item.TypeName未定義の内部あなたが観測可能ではありません()表記で型名にアクセスするように見える計算されているため： あなたが

私はここにJSONを掲載ありがとうございます。 通常、基本的に内容を読み取る()を使用して観測値をラップ解除します。

のViewModel：

var self = this; 
    self.brickInfos = ko.observableArray([]); 
    self.brickInfos(json.BrickInfos); 

    self.query = ko.observable(""); 
    self.filteredData = ko.computed(function() { 
    var filter = self.query().toLowerCase(); 

    if (!filter) { 
     return ; 
    } else { 
     return ko.utils.arrayFilter(self.brickInfos(), function(item) { 
     return item.TypeName.toLowerCase().indexOf(filter) !== -1; 
     }); 
    } 
    }); 
} 
var vm = new ViewModel(); 
ko.applyBindings(vm); 

私はいくつかのものを変更した、あなたが作業サンプル

var json = { 
 
    "BrickInfos": [{ 
 
    "Properties": { 
 
     "Properties": [ 
 

 
     ] 
 
    }, 
 
    "Implements": { 
 
     "Interfaces": [{ 
 
     "TypeName": "soemtypename" 
 
     }, { 
 
     "TypeName": "soemtypename2" 
 
     }] 
 
    }, 
 
    "Name": "AccessBareBoneApp", 
 
    "Description": "", 
 
    "TypeName": "soemtypename", 
 
    "AssemblyName": "string other safasgfas", 
 
    "Obsolete": true 
 
    }, { 
 
    "Properties": { 
 
     "Properties": [{ 
 
     "Name": "file", 
 
     "Description": "asfasf", 
 
     "ValidationType": 12, 
 
     "Converter": 12, 
 
     "EnumTypeName": "string1" 
 
     }] 
 
    }, 
 
    "Implements": { 
 
     "Interfaces": [{ 
 
     "TypeName": "soemtypename" 
 
     }, { 
 
     "TypeName": "soemtypename" 
 
     }] 
 
    }, 
 
    "Name": "File2", 
 
    "Description": "asfasfas", 
 
    "TypeName": "soemtypenameTest", 
 
    "AssemblyName": "string other safasgfas", 
 
    "Obsolete": false 
 
    }] 
 
} 
 

 
function ViewModel() { 
 
    var self = this; 
 
    self.brickInfos = ko.observableArray([]); 
 
    self.brickInfos(json.BrickInfos); 
 

 
    self.query = ko.observable(""); 
 
    self.filteredData = ko.computed(function() { 
 
    var filter = self.query().toLowerCase(); 
 

 
    if (!filter) { 
 
     return self.brickInfos(); 
 
    } else { 
 
     return ko.utils.arrayFilter(self.brickInfos(), function(item) { 
 
     return item.TypeName.toLowerCase().indexOf(filter) !== -1; 
 
     }); 
 
    } 
 
    }); 
 
} 
 
var vm = new ViewModel(); 
 
ko.applyBindings(vm);

body { 
 
    font-family: arial; 
 
    font-size: 14px; 
 
} 
 

 
.liveExample { 
 
    padding: 1em; 
 
    background-color: #EEEEDD; 
 
    border: 1px solid #CCC; 
 
    max-width: 655px; 
 
} 
 

 
.liveExample input { 
 
    font-family: Arial; 
 
} 
 

 
.liveExample b { 
 
    font-weight: bold; 
 
} 
 

 
.liveExample p { 
 
    margin-top: 0.9em; 
 
    margin-bottom: 0.9em; 
 
} 
 

 
.liveExample select[multiple] { 
 
    width: 100%; 
 
    height: 8em; 
 
} 
 

 
.liveExample h2 { 
 
    margin-top: 0.4em; 
 
    font-weight: bold; 
 
    font-size: 1.2em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div class="form"> 
 
    <div class="form-group"> 
 
    <input type="search" class="form-control" data-bind="textInput: query" autocomplete="off" /> 
 
    </div> 
 
</div> 
 

 
<div id="tab1" class="col s12"> 
 
    <ul class="collapsible" data-collapsible="accordion" data-bind="foreach:filteredData"> 
 
    <li> 
 
     <div class="collapsible-header"> 
 
     <i class="material-icons">view_stream</i> 
 
     <p class="blue-text" data-bind="text: TypeName"></p><br> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>