First thing to do is at least use the init
callback.
ko.bindingHandlers.KML = {
init: function (element, valueAccessor) {
var data = ko.utils.unwrapObservable(valueAccessor()),
mapOptions = ko.utils.unwrapObservable(data.mapOptions) || {},
levels = ko.utils.unwrapObservable(data.levels) || [],
map = new google.maps.Map(element, mapOptions);
// now that the map is created, create layers for each level in each country
// set the layers visibility
}
}
Then, in the update
callback you only need to update the visibility of the layers
ko.bindingHandlers.KML = {
init: function (element, valueAccessor) {
},
update: function(element, valueAccessor){
// get data from valueAccessor
// for each level, set visibility
}
}
But, now we don't have a map to use in the update
callback. Fortunately we can create our own objects inside our bindingHanlder, so let's do that:
ko.bindingHandlers.KML = {
config : {
map: {}
},
init: function (element, valueAccessor) {
var map = new google.maps.Map(element, mapOptions);
// now we can store our map;
ko.bindingHandlers.KML.config.map = map;
},
update: function(element, valueAccessor){
// and use it in the update
var map ko.bindingHandlers.KML.config.map;
}
}
This also means we can define a model for our layer as well and let that model control visibility through an observable.
This all results in the following jsFiddle example