Adding Sproutcore KVO to OpenLayers - Part 1
The truth is that after you start using Sproutcore KVO you become addicted to its beauty and simplicity.
Where in other frameworks you spent most time keeping each part of the app in sync, in Sproutcore you get it for free. Sure Sproutcore isn't perfect and is not for all, but KVO is simply automagical!
In this post I will show how easy it is to implement KVO on top of OpenLayers and take advantage of KVO to bind features, wfs queries and UI controls to otherwise stubborn Openlayers objects.
In this example we will create a Vector layer, add KVo to it and then verify KVO bindings by manually adding an observer. I have run all this code from Google Chrome console and you can do it too.
First thing to do is to create a scratch SC project:
Just to make sure we check that v_kvo is still an OL object:
In another post I am preparing I will rewrite an OpenLayers example from their web site using this KVO technique.
Where in other frameworks you spent most time keeping each part of the app in sync, in Sproutcore you get it for free. Sure Sproutcore isn't perfect and is not for all, but KVO is simply automagical!
In this post I will show how easy it is to implement KVO on top of OpenLayers and take advantage of KVO to bind features, wfs queries and UI controls to otherwise stubborn Openlayers objects.
In this example we will create a Vector layer, add KVo to it and then verify KVO bindings by manually adding an observer. I have run all this code from Google Chrome console and you can do it too.
First thing to do is to create a scratch SC project:
sc-init kvoolthen let's edit the Buildfile and add the following lines at the end so that the OpenLayers library is loaded with the app:
config :all do |c|
c[:javascript_libs] = ['http://www.openlayers.org/api/OpenLayers.js']
end
Run the project with sc-server and browse to localhost:4020/kvool. Now open the javascript console (CTRL-SHIFT-I) and type the following (give return after each line):v = new OpenLayers.Layer.Vector('kvodemo')
v_kvo = SC.mixin(v, SC.Observable);
myobserver = function(){console.log("A Value for a property changed!");}
v_kvo.addObserver('drawn', this, myobserver);
v_kvo.set('drawn',true);
As expected the console will report that a property has changed its value, meaning that KVO is working as expected.Just to make sure we check that v_kvo is still an OL object:
v_kvo instanceof OpenLayers.Layer.Vectorshould return true.
In another post I am preparing I will rewrite an OpenLayers example from their web site using this KVO technique.