ノックアウト観察可能な配列は、私がここにいくつかの助けが必要

Question

私のリストに再レンダリングされません：..私はトップと更新自体の入力で絞込み単純なリストを、やりたいhttps://jsfiddle.net/vhaurnpw/

を

JS /ノックアウト：

var viewModel = { 
    query: ko.observable(''), 
    places: ko.observable(data), 

    search: function(value) { 
     viewModel.places = []; 
     console.log(value) 

     for (var i = 0; i < data.length; i++) { 

      if(data[i].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) { 
       viewModel.places.push(data[i]); 
      } 
       console.log(viewModel.places); 
     } 
    } 
}; 

viewModel.query.subscribe(viewModel.search); 

ko.applyBindings(viewModel); 

HTML：

<form acion="#" data-bind="submit: search"> 
<input placeholder="Search" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off"> 
</form> 

<ul data-bind="foreach: places"> 
    <li> 
    <span data-bind="text: name"></span> 
    </li> 
</ul> 

リストがレンダリングされますが、何かを入力すると結果が表示されません。

代わりにコンソールを参照すると、console.logが表示され、正常に更新されます。

どうすればHTMLをリフレッシュできますか？ :(

Answer 1

次の問題は、あなたのコードにあります。

1. placesニーズは、あなたが観測アレイからの追加/削除を追跡できるようにObservableArrayなく観察可能であることを。だから、places: ko.observable(data)からの変更コードは、
places: ko.observableArray(data),にviewModel.places関数であるので、あなたは viewModel.places = []ように別の値を割り当てるとき、それは viewModel.placesに空の配列を割り当てている。 viewModel.placesの値を変更するためには、関数として呼び出す必要l IKE viewModel.places([]);

注：あなたのコードは、テキストボックスがクリアされているケースバックにデータを追加しません、私はあなたが問題の解決策を持って、あなたが同様にこの問題を解決することを願って。

コンプリートワーキングコード：

var data = [ 
 
\t \t \t { name: 'Isartor'}, 
 
\t \t \t { name: 'Sendlinger Tor'}, 
 
\t \t \t { name: 'Marienplatz'}, 
 
\t \t \t { name: 'Stachus'}, 
 
\t \t \t { name: 'Bayerischer Rundfunk'}, 
 
\t \t \t { name: 'Google München'}, 
 
\t \t \t { name: 'Viktualienmarkt'}, 
 
\t \t \t { name: 'Museumsinsel'}, 
 
\t \t \t { name: 'Tierpark Hellabrunn'}, 
 
\t \t \t { name: 'Allianz Arena'}, 
 
\t \t \t { name: 'Olympia-Park'}, 
 
\t \t \t { name: 'Flaucher-Insel'} 
 
\t \t \t \t \t ]; 
 

 
var viewModel = { 
 
\t \t query: ko.observable(''), 
 
\t \t places: ko.observableArray(data), 
 

 
\t \t search: function(value) { 
 
\t \t \t viewModel.places([]); 
 
\t \t \t console.log(value) 
 

 
\t \t \t for (var i = 0; i < data.length; i++) { 
 

 
\t \t \t \t if(data[i].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) { 
 
\t \t \t \t \t viewModel.places.push(data[i]); 
 
\t \t \t \t } 
 
\t \t \t \t \t console.log(viewModel.places); 
 
\t \t \t } 
 
\t \t } 
 
}; 
 

 
viewModel.query.subscribe(viewModel.search); 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<form acion="#" data-bind="submit: search"> 
 
    <input placeholder="Search" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off"> 
 
</form> 
 

 
<ul data-bind="foreach: places"> 
 
    <li> 
 
     <span data-bind="text: name">asd</span> 
 
    </li> 
 
</ul>