Problem mit Filterbindung mit knockout.js

Question

Ich bin neu mit Knockout.js Framework arbeiten und ich habe den folgenden Fehler in meinem Code, ich bin eine Anwendung mit Knockout.js bauen, funktioniert alles gut, außer wenn ich versuchte, ein abhängigesObservable zu erstellen.

Dies ist der Javascript-Code:

(function() { 
    'use strict'; 

    console.log("This is my Application"); 

    var app = { 
     mapElement: document.getElementById('map'), 
     mapObj: map, 
     locations : ko.observableArray([ 
      {id: 1, title: 'Holywood Theater', location: {lat: 43.098344, lng: -76.145697}}, 
      {id: 2, title: 'Mattydale Fire Department', location: {lat: 43.098172, lng: -76.142189}}, 
      {id: 3, title: 'Original Italian Pizza', location: {lat: 43.098854, lng: -76.144700}}, 
      {id: 4, title: 'Roxboro Road Middle School', location: {lat: 43.101110, lng: -76.150901}}, 
      {id: 5, title: 'Big Lots', location: {lat: 43.101400, lng: -76.146985}}, 
      {id: 6, title: 'Camnel pub', location: {lat: 43.098670, lng: -76.145832}} 
     ]), 
     markers:[], 
     textFilter: ko.observable(), 
     filterLocations: ko.dependentObservable(function() { 
          return ko.utils.arrayFilter(app.locations(), function (loc) { 
           return loc.title().toLowerCase().includes(app.textFilter().toLowerCase()); 
          }); 
         }) 
    }; 

    ko.applyBindings(app); 
})(); 

Der Fehler in der Chromkonsole ist:

Uncaught TypeError: Cannot read property 'locations' of undefined

Answer 1

Wenn Objektliteral für Viewmodel verwenden, sollten Sie Ihre berechneten/abhängigen Observablen als

app.filterLocations = ko.computed(function() { 
         return ko.utils.arrayFilter(this.locations(), function (loc) { 
          return loc.title.toLowerCase().includes(app.textFilter().toLowerCase()); 
         }); 
        }, app); 

Hinweis Gang app Objekt als zweite Parameter berechnet Funktion definieren, den Spielraum für this definiert.

Verwenden Sie auch computed anstelle von dependentObservable.

Computed Observables

Answer 2

Sie können nicht 'App' var verwenden, weil Sie es immer noch sind zu schaffen.

var app = {... 

    ^^^ return ko.utils.arrayFilter(app.locations(), ... 

             ^^^