我想我发现了，
所以这里是你正在做的事情的淘汰 js 代码。
告诉我这是否有效：
function Coord(lat, ing) {
var self = this;
self.lat = ko.observable(lat);
self.ing = ko.observable(ing);
}
function Place(title, lat, ing, address) {
var self = this;
self.title = title;
self.address = address;
self.coords = ko.observable(new Coord(lat,ing));
self.visible = ko.observable(true);
//create a function to make the list of locations clikable
self.myList = function() {
map.setZoom(18);
map.panTo({lat: self.coords().lat(), lng: self.coords().ing()});
//map.setCenter(markers[title].getPosition());
};
}
function LocationsViewModel() {
var self = this;
self.query = ko.observable('');
self.places = ko.observableArray([
new Place("Ble Cafe-Restaurant", 40.632286, 22.944743, "Street: Agias Sofias 19, 54623"),
new Place("Olympion Bar-Restaurant", 40.632744, 22.941767, "Street: Aristotelous Square 10, 54623"),
new Place("Olive and Oregon Restaurant", 40.634679, 22.943193, "Street: Aristotelous Square 10, 54623"),
new Place("Mojo Cafe", 40.631824, 22.940958, "Aristotelous 4, 54623"),
new Place("Seven Seas Restaurant", 40.633300, 22.939356, "Kalapothaki 10, 54624"),
new Place("Varelakia Gyros", 40.574634, 22.949332, "Street: Riga Fereou 97, 56728"),
]);
self.search = function() {
for(var x in self.places()) {
if( self.query() != '' && self.places()[x].title.toLowerCase().indexOf(self.query().toLowerCase()) < 0) {
self.places()[x].visible(false);
}else{
self.places()[x].visible(true);
}
}
};
}
ko.applyBindings(new LocationsViewModel());
我让你找出把它放在哪里。
这里是html：
<div class="container">
<h1>Find Cafes and Restaurants in Thessaloniki City</h1>
<div class="myList">
<form action="#">
<!-- create search box for user's input -->
<input placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>
<div class="content">
<!-- display the list -->
<!--add the click event here to make the list clickable -->
<ul data-bind="template: {name:'place', foreach:places}">
</ul>
</div>
</div>
这是脚本 balise 中的模板
<li data-bind="visible: visible"><strong data-bind="text: title, click: myList"></strong></li>
我已经更新了搜索功能的代码。
它包括 place 对象中的新 ko.observable、LocationsViewModel 中的新函数和 html 中的新标记。