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

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?

我有一个视图模型,通过ajax请求获取位置。这些地方即将到来,但当我尝试在自定义绑定谷歌地图中使用它时,valueAccessor为空。你能解释一下我在做什么错吗?

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>

1 个解决方案

#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 -

我不确定为什么你不能访问“地方”,但下面是另一种你可以尝试在绑定处理程序中访问它的方法 -

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

更新html中的绑定以传入viewModel -
```
<div id="map_canvas" data-bind="googlemap: places, viewModel: $root"></div>
```

Include "allBindingAccessors" as a parameter to your handler -

包含“allBindingAccessors”作为处理程序的参数 -

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

Hope this works :P

希望这有效:P

#1