自定义绑定（knockoutjs和googlemap）中的ValueAccessor为空

Question

I have a view model which get places via ajax request. These places are coming, but when I try to use it in the custom binding google map, valueAccessor is empty. Can you explain to me what wrong I'm doing?

 var MapViewModel = function(){ var self = this; var yelp = new YelpDataProvider(); var categories = [{"id": 1,"name" : "Bars"}, {"id": 2,"name" : "Gyms"}]; var addresses = []; self.places = ko.observableArray(); self.selectCategory = ko.observable(); self.selectCategory.subscribe(function(category) { var _filtered = addresses; if(typeof category != "undefined") _filtered = _.where(_filtered, {'categoryId': category}); yelp.getDataForPlaces(_filtered).then(function(place){ self.places(place); }); }); yelp.getDataForPlaces(addresses).then(function(place){ self.places(place); }) } ko.bindingHandlers.googlemap = { init: function (element, valueAccessor) { debugger; var value = ko.utils.unwrapObservable(valueAccessor()); console.log(value); console.log(valueAccessor()); var centerPoint = new google.maps.LatLng(value[0].location.coordinate.latitude, value[0].location.coordinate.longitude); var myWrapper = $("#wrapper"); $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); myWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { // code to execute after transition ends google.maps.event.trigger(map, 'resize'); }); }); // create the map var myOptions = { zoom: 5, center: centerPoint, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(element, mapOptions) var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); _.each(value,function(place){ var _point = new google.maps.LatLng(place[0].location.coordinate.latitude, place[0].location.coordinate.longitude); var marker = createMarker(point, place.businesses[0].id, businesses[0].snippet_text) }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); google.maps.event.addDomListener(window, 'load', initialize); } }; ko.applyBindings(MapViewModel); 

 <div id="map_canvas" data-bind="googlemap: places"></div> 

Answer 1

I am not sure why aren't you able to access "places", but below is another way you can try accessing it inside of your binding handler -

1. Update the binding in your html to pass in the viewModel -

    <div id="map_canvas" data-bind="googlemap: places, viewModel: $root"></div> 

2. Include "allBindingAccessors" as a parameter to your handler -

    ko.bindingHandlers.googlemap = { init: function (element, valueAccessor, allBindingsAccessor) { var viewModel = allBindingsAccessor().viewModel; var value = viewModel.places(); // Do more stuff } } 

Hope this works :P