ノックアウトのリストをフィルタリングする

私はこの件に関して同様の質問がたくさんあることを知っていますが、私は自分自身でこの問題を解決しようとしていて、それはできませんでした。ノックアウトのリストをフィルタリングする

私がやっていることは、テキストボックスでリストをフィルタリングすることです。以下のコード：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Magic Towns</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
     <link rel="stylesheet" href="css/styles.css"> 
    <style> 
     html, 
     body { 
     font-family: Arial, sans-serif; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 

<div id="map"></div> 
<div class="menuContainer"> 
    <span class="center" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 
    <div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <a href="#"><h1>Locations:</h1></a> 
    <form role="search"> 
        <input type="text" data-bind="value: query, valueUpdate: 'keyup'" placeholder="Search..."> 
    </form> 
    <div data-bind='with currentPlace' > 
     <div data-bind='foreach: placeList'> 
     <p href="#" class="whiteFont" data-bind='text: city, click: closeNav'></p> 
     </div> 
    </div> 
    </div> 
</div> 

    <script src='js/sidebar.js'></script> 
    <script src="js/jquery-3.2.1.min.js"></script> 
    <script src="js/knockout-3.4.2.js"></script> 
    <script src="js/data.js"></script> 
    <script src="js/app3.js"></script> 


    </body> 
</html>

のjavascript：

var Place = function(data) { 
    this.city = ko.observable(data.city); 
    this.lat = ko.observable(data.lat); 
    this.lng = ko.observable(data.lng); 
}; 


var ViewModel = function() { 
    var self = this; 

    self.placeList = ko.observableArray([]); 
    self.query = ko.observable(''), 

    initialPlaces.forEach(function(placeLocation) { 
     self.placeList.push(new Place(placeLocation)); 
    }); 
    self.currentPlace = ko.observable(this.placeList()[0]); 

}; 



    ko.applyBindings(ViewModel);

データ：

var initialPlaces = [ 
    {"city":"R","lat":22,"lng":-102}, 
    {"city":"T","lat":23,"lng":-110}, 
    {"city":"P","lat":18,"lng":-92}, 
    {"city":"F","lat":25,"lng":-102}, 
];

私はすでに、これはLink1 Link2と別のものが、何をリンクしてみてください... I Javascriptとノックアウトのノブ（2週間以内）。

例を試すたびに、私のリストは空白になり、何も表示されません。

この問題の解決方法に関する情報はどこにありますか、ご意見ありがとうございましたか教えてください。

ありがとうございます。

出典

2017-12-10 Alberto Rocha

コードにはいくつかの問題があります。

withバインディングでは、新しいbinding contextが作成されます。つまり、withバインディング内にネストされているので、ノックアウトはplaceListプロパティの中にcurrentPlaceオブジェクトを探します。
あなたの結合でwith後:（with currentPlace）
が欠落しているあなたは、ko.applyBindingsにない機能をオブジェクトを渡す必要があります。 ViewModelとしてオブジェクトリテラルを作成することもできます。または関数を作成してからnew演算子を使用してオブジェクトを作成します。後者を使用しています。（Difference b/n object literal and using new operator on a constructor function）

私はcurrentPlaceはあなたがcityに基づいて配列をフィルタリングするため、行うことになっているかわからないんだけど。あなたはqueryに基づいて配列をfilterます。このようなcomputedプロパティを作成することができます。それをテストするためにRun code snippet上

var initialPlaces = [{ 
 
    "city": "London", 
 
    "lat": 22, 
 
    "lng": -102 
 
}, { 
 
    "city": "New York", 
 
    "lat": 23, 
 
    "lng": -110 
 
}, { 
 
    "city": "New Delhi", 
 
    "lat": 18, 
 
    "lng": -92 
 
}]; 
 

 
var Place = function(data) { 
 
    this.city = ko.observable(data.city); 
 
    this.lat = ko.observable(data.lat); 
 
    this.lng = ko.observable(data.lng); 
 
}; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 

 
    self.placeList = ko.observableArray([]); 
 
    self.query = ko.observable(''); 
 

 
    initialPlaces.forEach(function(placeLocation) { 
 
    self.placeList.push(new Place(placeLocation)); 
 
    }); 
 

 
    // everytime query/placeList changes, this gets computed again 
 
    self.filteredPlaces = ko.computed(function() { 
 
    if (!self.query()) { 
 
     return self.placeList(); 
 
    } else { 
 
     return self.placeList() 
 
     .filter(place => place.city().toLowerCase().indexOf(self.query().toLowerCase()) > -1); 
 
    } 
 
    }); 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<input type="text" data-bind="value: query, valueUpdate: 'keyup'" placeholder="Search..."> 
 

 
<div data-bind="foreach:filteredPlaces"> 
 
    <span data-bind="text:city"></span><br> 
 
</div>

クリックします。 Here's a fiddleと一緒に遊びたい場合は

出典

2017-12-11 08:16:05 adiga

あなたは男性です！私にノックアウトの良いチュートリアルを紹介してもらえますか？ –

@AlbertoRocha私はビデオチュートリアルは知らないが、youtubeで検索することができます。 Knockoutの[documentation]（http://knockoutjs.com/documentation/introduction.html）は非常に簡単で分かりやすいです。左側に、バインディングのリストが表示されます。あなたは1つ1つずつ行くことができます。 Jsfiddle/Stack Overflowを検索することもできます。たとえば、googleで 'knockout foreach binding site：jsfiddle.net'を検索すると、数百回のフェイドルが発生します（同じようにサイトをstackoverflow.comに置き換えると同じです）。 – adiga

@AlbertoRocha http://www.knockmeout.net/は、シンプルで高度なトピックの非常に良いブログです。 [ここでは、役に立つバイリンガルのリスト]（http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.html）のブログから – adiga

ノックアウトのリストをフィルタリングする

答えて

関連する問題