fix event binding

js/editor.js

@@ -59,11 +59,11 @@ $(document).ready(function() {
 
   });
 
-  _ws.events.on('rendered:tabs', function() {
-    console.log('rebind editor tabs');
-    $tabItems = $('#tabs li');
-    bindEditorTabs();
-  });
+  // _ws.events.on('rendered:tabs', function() {
+  //   console.log('rebind editor tabs');
+  //   $tabItems = $('#tabs li');
+  //   bindEditorTabs();
+  // });
 
   if(_ws.files.length === 0) {
     return;
@@ -106,25 +106,34 @@ $(document).ready(function() {
   }
 
 
+  function onTabClicked() {
+    var clickedItem = $(this);
+    console.log('clicked', this);
+    var type = clickedItem.data('type');
+    editorSession.setMode("ace/mode/" + mapTypes[type]);
+    var name = clickedItem.html();
+    var file = _ws.files.find(f => (f.name === name));
+    editorSession.setValue(file.content);
+    // saveToLocalStorage();
+    // var mode = $(this).prop('id').substr(5);
+    // console.log( .html() );
+    // setActiveTab(mode);
+  }
+
+  _ws.makeView('tabs', {
+    events: {
+      'click li': onTabClicked
+    }
+  })
+
   /**
    * File list tabs click handler
    */
-  function bindEditorTabs() {
-    $tabItems.click(function() {
-      var clickedItem = $(this);
-      var type = clickedItem.data('type');
-      editorSession.setMode("ace/mode/" + mapTypes[type]);
-      var name = clickedItem.html();
-      var file = _ws.files.find(f => (f.name === name));
-      editorSession.setValue(file.content);
-      // saveToLocalStorage();
-      // var mode = $(this).prop('id').substr(5);
-      // console.log( .html() );
-      // setActiveTab(mode);
-    })
-  }
+  // function bindEditorTabs() {
+  //   $tabItems.click(onTabClicked);
+  // }
 
-  bindEditorTabs();
+  // bindEditorTabs();
 
 
   // /**

js/menu.js

@@ -84,7 +84,8 @@
         .then(function(parts) {
           console.log(parts);
           renderDetailsExample(parts);
-          renderTabs(parts);
+          // renderTabs(parts);
+          _ws.ui.tabs.render(parts);
 
         });
       }
@@ -124,10 +125,10 @@
       $('#' + id).html( Mustache.render( tmpl, parts ) );
     }
 
-    function renderTabs(parts) {
-      renderInto('tabs', parts);
-      _ws.events.emit('rendered:tabs');
-    }
+    // function renderTabs(parts) {
+    //   renderInto('tabs', parts);
+    //   _ws.events.emit('rendered:tabs');
+    // }
 
     function renderDetailsExample(parts) {
       var tmpl = $('#details-example-tmpl').html();

js/ws-ui-parts.js

@@ -36,24 +36,29 @@
 
     _ws.makeView = function(elemId, props) {
       var v = {};
-      props = props || {};
+      v.props = props || {};
 
       v.$elem = $('#' + elemId);
       v.partName = _.camelCase(elemId);
       _ws.ui[v.partName] = v;
 
       // Assign a default render function if none given
-      if(! props.render) {
+      if(! v.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();
+          if(! data) {
+            console.log('WARNING! You should provide data for #' + elemId + "'s render()");
           }
+          // 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();
+          // }
+          console.log('rebind events after render', this);
+          this.bindEvents();
         }).bind(v);
       }
       // Otherwise bind the provided one
@@ -62,15 +67,22 @@
       }
 
       // 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);
-        }
+      if(v.props.events) {
+        v.bindEvents = (function() {
+          var events = this.props.events;
+          for(var descriptor in events) {
+            var handler = 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.find(selector).on(evtName, handler);
+          }
+        }).bind(v);
+        v.bindEvents();
+      }
+      else {
+        v.bindEvents = function() {};
       }
     }