view system wip 2

js/menu.js

@@ -3,6 +3,9 @@
   $(document).ready(function() {
 
     function SandboxNavigator() {
+      _ws.makeView('menu-example');
+      console.log(_ws.ui);
+
       this.$menu = $('#nav-menus');
       this.$menuBtn = $('#menu-btn');
       this.$menuExample = $('#menu-example');

js/ws-ui-parts.js

@@ -10,6 +10,7 @@
         this.$elem.find('a').click(function(e) {
           e.preventDefault();
           var $link = $(this);
+          console.log('menu item clicked', $link.prop('href'));
           var originalColor = $link.css('backgroundColor');
           // self.toggleMenu();
           $link.animate({
@@ -32,6 +33,29 @@
       part.$elem.html( Mustache.render( part.tmpl, data ) );
     }
 
+    _ws.makeView = function(elemId, props) {
+      var v = {};
+      props = props || {};
+
+      v.$elem = $('#' + elemId);
+      v.partName = _.camelCase(elemId);
+      _ws.ui[v.partName] = v;
+
+      if(! props.render) {
+        var $tmplEl = $('script[data-tmpl-for="' + elemId + '"]');
+        v.tmpl = $tmplEl.html();
+        v.render = (function(data) {
+          var eventBinder = eventBinders[v.partName];
+          this.$elem.html( Mustache.render( this.tmpl, data ) );
+          if(eventBinder) {
+            eventBinder = eventBinder.bind(this);
+            console.log('bind events for', v.partName);
+            eventBinder();
+          }
+        }).bind(v);
+      }
+    }
+
 
     /**
      * Initialize an empty object to be populated as follows:
@@ -43,6 +67,8 @@
     // Iterate over the template script elements
     var $templateElems = $('script[data-tmpl-for]');
     $templateElems.each(function(idx, el) {
+      return;
+
 
       // Get the script element content and target element id
       var $script = $(el);