Knockout beobachtbaren Array nicht neu rendern meiner Liste

Question

ich etwas Hilfe brauchen hier: https://jsfiddle.net/vhaurnpw/

Ich möchte eine einfache Liste zu tun, die durch den Eingang auf filterbar und aktualisiert sich ..

JS/Knockout:

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> 

Liste wird gerendert, aber wenn Sie etwas eingeben, zeigt es Ihnen nicht das Ergebnis.

Stattdessen, wenn Sie die Konsole suchen, sehen Sie die console.log und es aktualisiert sich gut!

also wie aktualisiere ich meine HTML? :(

Answer 1

Es gibt folgende Probleme in Ihrem Code.

1. places Bedürfnisse so ein ObservableArray und kein beobachtbares sein, dass Sie die Hinzufügen/Entfernen aus der beobachtbare Array verfolgen können. So ändern Code Von places: ko.observable(data)umplaces: ko.observableArray(data),
2. viewModel.places ist Funktion, so dass, wenn Sie einen anderen Wert wie viewModel.places = [] zuweisen, wird ein leeres Array zum viewModel.places zuweisen. um den Wert des viewModel.places zu ändern, müssen Sie es als eine Funktion aufzurufen l ike viewModel.places([]);

Hinweis: Ihr Code nicht auf die Daten für den Fall, fügt wieder die Textbox gelöscht ist, ich hoffe, dass Sie die Lösung für das Problem bekam, und Sie können auch dieses Problem beheben.

komplette Arbeits Code:

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>