カスタムバインディングでValueAccessorが空です（knockoutjs＆googlemap）

Question

私はajaxリクエストで場所を取得するビューモデルを持っています。これらの場所は来ていますが、カスタムバインドGoogleマップで使用しようとすると、valueAccessorは空です。 あなたは何をしているのか私に説明できますか？

var MapViewModel = function(){ 
 

 
\t var self = this; 
 
    var yelp = new YelpDataProvider(); 
 
    var categories = [{"id": 1,"name" : "Bars"}, {"id": 2,"name" : "Gyms"}]; 
 
    var addresses = []; 
 
\t self.places = ko.observableArray(); 
 
\t self.selectCategory = ko.observable(); 
 
\t 
 
    self.selectCategory.subscribe(function(category) { 
 
    \t var _filtered = addresses; 
 

 
    \t if(typeof category != "undefined") 
 
    \t \t _filtered = _.where(_filtered, {'categoryId': category}); 
 
    \t 
 
     yelp.getDataForPlaces(_filtered).then(function(place){ 
 
\t \t \t self.places(place); 
 
\t \t }); 
 
    }); 
 

 
\t yelp.getDataForPlaces(addresses).then(function(place){ 
 
\t \t self.places(place); 
 
\t }) 
 

 
} 
 

 

 
ko.bindingHandlers.googlemap = { 
 
    init: function (element, valueAccessor) { 
 
    \t debugger; 
 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
 
     console.log(value); 
 
     console.log(valueAccessor()); 
 
     var centerPoint = new google.maps.LatLng(value[0].location.coordinate.latitude, 
 
     \t \t \t \t value[0].location.coordinate.longitude); 
 

 
    \t \t var myWrapper = $("#wrapper"); 
 
    \t \t $("#menu-toggle").click(function(e) { 
 
    \t \t e.preventDefault(); 
 
    \t \t $("#wrapper").toggleClass("toggled"); 
 
    \t \t myWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
 
     \t \t \t // code to execute after transition ends 
 
     \t \t \t google.maps.event.trigger(map, 'resize'); 
 
    \t \t }); 
 
    \t \t }); 
 

 
    \t \t // create the map 
 
\t \t var myOptions = { 
 
\t \t  zoom: 5, 
 
\t \t  center: centerPoint, 
 
\t \t  mapTypeControl: true, 
 
\t \t  mapTypeControlOptions: { 
 
\t \t  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
\t \t  }, 
 
\t \t  navigationControl: true, 
 
\t \t  mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t } 
 

 
\t \t var map = new google.maps.Map(element, mapOptions) 
 

 
\t \t var infowindow = new google.maps.InfoWindow({ 
 
\t \t size: new google.maps.Size(150, 50) 
 
\t \t }); 
 

 
\t \t google.maps.event.addListener(map, 'click', function() { 
 
\t \t \t infowindow.close(); 
 
\t \t }); 
 

 

 
\t \t _.each(value,function(place){ 
 
\t \t \t var _point = new google.maps.LatLng(place[0].location.coordinate.latitude, 
 
\t \t \t \t   \t \t \t \t place[0].location.coordinate.longitude); 
 
\t \t \t \t var marker = createMarker(point, place.businesses[0].id, 
 
\t \t \t \t businesses[0].snippet_text) 
 
\t \t }); 
 

 
\t \t google.maps.event.addListener(map, 'click', function() { 
 
    \t \t \t infowindow.close(); 
 
    \t \t }); 
 

 
\t \t google.maps.event.addDomListener(window, 'load', initialize); 
 
\t \t 
 
    } 
 
}; 
 

 
ko.applyBindings(MapViewModel);

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

Answer 1

私はなぜあなたは「場所」にアクセスすることはできませんが、以下のあなたが結合ハンドラの内部でそれにアクセスしてみてくださいすることができ、別の方法であることを確認していない -

1. あなたのhtmlのバインディングをviewModelで渡すように更新します。 -

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

2. があなたのハンドラにパラメータとして "allBindingAccessors" を含める - この作品

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

希望：P