ノックアウトJS関数に値を渡す

Question

私は多くの似たような話題を読んでいますが、答えは私の場合にはうまくいかないようです。ノックアウトデータバインディングを使用してマーカーの表示/非表示機能を実装するには、Google Maps APIを使用しています。ショーマーカーでは問題はありません。しかし、マーカー変数をhideMarkers関数に渡さなければならないので、これを行うことはできません。ここで

はhtmlです：ここでは

<div class="col-sm-6"> 
    <input id="hide-listings" type="button" value="Hide Listings" class="btn1 btn-primary text-center" data-bind="click: hideMarkers"> 
</div> 

は私のViewModelです：

function viewModel() { 
    var self = this; 
    self.places = ko.observableArray(locations); 
    self.address = ko.observable(); 
    self.city = ko.observable(); 
    self.title = ko.observable(); 
    self.id = ko.observable(); 
    this.markers = ko.observable(); 
    this.zaddress = ko.observable(); 
    this.taddress = ko.observable(); 
    this.paddress = ko.observable(); 
    this.filter = ko.observable(); 
    this.visiblePlaces = ko.computed(function() { 
     return this.places().filter(function(place) { 
      if (!self.filter() || place.title.toLowerCase().indexOf(self.filter().toLowerCase()) !== -1) 
       return place; 
     }); 
    }, this); 
    //Zooms to a selected marker, open infowindow and displays current weather 
    self.zoomToPlace = function() { 
     // Initialize the geocoder. 
     var geocoder = new google.maps.Geocoder(); 
     // Get the place. 
     var address = this.address; 
     var id = this.id; 
     var city = this.city; 
     var weatherAPIXU = "http://api.apixu.com/v1/current.json?key=453477e8eec14cbc805210143171706&q=" + city; 
     $.getJSON(weatherAPIXU, function(data) { 
      var forecast = data.current.temp_c; 
      $(".weather").html(forecast + '° C'); 
     }); 
     // Geocode the address/area entered to get the center. Then, center the map on it and zoom in 
     geocoder.geocode({ 
      address: address, 
     }, function(results, status) { 
      map.setCenter(results[0].geometry.location); 
      map.setZoom(15); 
      google.maps.event.trigger(markers[id], 'click'); 
     }); 
    }; 
    self.showListings = function() { 
     var bounds = new google.maps.LatLngBounds(); 
     // Extend the boundaries of the map for each marker and display the marker 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
      bounds.extend(markers[i].position); 
     } 
     map.fitBounds(bounds); 
    }; 
    // This function takes the input value in the find nearby area text input 
    // locates it, and then zooms into that area. This is so that the user can 
    // show all listings, then decide to focus on one area of the map. 
    self.zoomToArea = function() { 
     // Initialize the geocoder. 
     var geocoder = new google.maps.Geocoder(); 
     // Get the address or place that the user entered. 
     var zaddress = this.zaddress(); 
     // Make sure the address isn't blank. 
     if (zaddress === '') { 
      window.alert('You must enter an area, or address.'); 
     } else { 
      // Geocode the address/area entered to get the center. Then, center the map on it and zoom in 
      geocoder.geocode({ 
       address: zaddress, 
      }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        map.setZoom(15); 
       } else { 
        window.alert(
         'We could not find that location - try entering a more' + 
         ' specific place.'); 
       } 
      }); 
     } 
    }; 
    // This function allows the user to input a desired travel time, in 
    // minutes, and a travel mode, and a location - and only show the listings 
    // that are within that travel time (via that travel mode) of the location 
    self.searchWithinTime = function() { 
     // Initialize the distance matrix service. 
     var distanceMatrixService = new google.maps.DistanceMatrixService(); 
     var taddress = this.taddress(); 
     // Check to make sure the place entered isn't blank. 
     if (taddress === '') { 
      window.alert('You must enter an address.'); 
     } else { 
      hideMarkers(markers); 
      // Use the distance matrix service to calculate the duration of the 
      // routes between all our markers, and the destination address entered 
      // by the user. Then put all the origins into an origin matrix. 
      var origins = []; 
      for (var i = 0; i < markers.length; i++) { 
       origins[i] = markers[i].position; 
      } 
      var destination = taddress; 
      var mode = document.getElementById('mode').value; 
      // Now that both the origins and destination are defined, get all the 
      // info for the distances between them. 
      distanceMatrixService.getDistanceMatrix({ 
       origins: origins, 
       destinations: [destination], 
       travelMode: google.maps.TravelMode[mode], 
       unitSystem: google.maps.UnitSystem.IMPERIAL, 
      }, function(response, status) { 
       if (status !== google.maps.DistanceMatrixStatus 
        .OK) { 
        window.alert('Error was: ' + status); 
       } else { 
        displayMarkersWithinTime(response); 
       } 
      }); 
     } 
    }; 
    // This function fires when the user select "go" on the places search. 
    // It will do a nearby search using the entered query string or place. 
    self.textSearchPlaces = function() { 
     var bounds = map.getBounds(); 
     var place = this.paddress(); 
     hideMarkers(placeMarkers); 
     var placesService = new google.maps.places.PlacesService(map); 
     placesService.textSearch({ 
      query: place, 
      bounds: bounds 
     }, function(results, status) { 
      if (status === google.maps.places.PlacesServiceStatus 
       .OK) { 
       createMarkersForPlaces(results); 
      } 
     }); 
    }; 
    // This function will loop through the listings and hide them all. 
    this.hideMarkers = function(markers) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
    }; 
} 
ko.applyBindings(new viewModel()); 

してください、最高のこの問題にアプローチする方法で私をアドバイス、ありがとうございました！

Answer 1

を私はそれを考え出しました！問題は、viewModel内の関数に値を渡していましたが、私のクリックデータバインディングに値を渡していないことでした。正しいHTML：

<div class="col-sm-6"> 
    <input id="hide-listings" type="button" value="Hide Listings" class="btn1 btn-primary text-center" data-bind="click: function() {hideMarkers(markers)}"> 
    </div> 

とのViewModel機能は単純です：

self.hideMarkers = function() { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
}; 

Answer 2

markersがthis.markersであるなら、あなたはその可能として機能するマーカーを渡す必要がいけない：

this.hideMarkers = function(markers) { 
    var m = markers == null ? this.markers : markers; 
    for (var i = 0; i < m.length; i++) { 
     m[i].setMap(null); 
    } 
}; 

これは、あなたがこの機能にもマーカーを渡すことができ、あなたがいけない場合、それはあなたのthis.markersにデフォルト設定されます意味。

それはすべてあなたが探している場合は、また、このようなノックアウトで追加のパラメータを渡すことができます。

<input data-bind="click: hideMarkers.bind($data, markersYouWishtoHide)"> 

http://knockoutjs.com/documentation/click-binding.html