我正在尝试在我的网络应用中实施搜索过滤器。我读了一些好文章，我找到了一些好的Jsfiddles。
我想按<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);
也是屏幕error
我的index.html：
{
"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
}
]
}
}
我的模特：
id supplier_id
1 2,3,4,5,6
这是我的数据的外观：Json data on console
任何好的建议我应该如何构建我的代码总是受欢迎的，因为我是KnockoutJS的新手。 谢谢
我在这里发布了JSON：
supplier_id答案 0 :(得分：1)
你得到item.TypeName未定义因为在计算内部你似乎访问带有()符号的typeName，这是不可观察的。
通常我们使用基本上读取它内容的()取消包装一个observable。
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>