view events

js/menu.js

@@ -3,7 +3,15 @@
   $(document).ready(function() {
 
     function SandboxNavigator() {
-      _ws.makeView('menu-example');
+      _ws.makeView('menu-example', {
+        events: {
+          'click a': function(e) {
+            e.preventDefault();
+            console.log('I was clicked', e.target, this);
+            $(this).css('color', 'red');
+          }
+        }
+      });
       console.log(_ws.ui);
 
       this.$menu = $('#nav-menus');

js/ws-ui-parts.js

@@ -33,6 +33,7 @@
       part.$elem.html( Mustache.render( part.tmpl, data ) );
     }
 
+
     _ws.makeView = function(elemId, props) {
       var v = {};
       props = props || {};
@@ -41,6 +42,7 @@
       v.partName = _.camelCase(elemId);
       _ws.ui[v.partName] = v;
 
+      // Assign a default render function if none given
       if(! props.render) {
         var $tmplEl = $('script[data-tmpl-for="' + elemId + '"]');
         v.tmpl = $tmplEl.html();
@@ -54,6 +56,22 @@
           }
         }).bind(v);
       }
+      // Otherwise bind the provided one
+      else {
+        v.render = props.render.bind(v);
+      }
+
+      // Set event handlers
+      if(props.events) {
+        for(var descriptor in props.events) {
+          var handler = props.events[descriptor];
+          var bits = descriptor.split(' ');
+          var evtName = bits.shift();
+          var selector = bits.join(' ');
+          console.log('#### bind', descriptor, 'e:' + evtName, 's:' + selector, handler.toString())
+          v.$elem.on(evtName, handler);
+        }
+      }
     }