TabBarController works!

hacking/TabBar.js

@@ -6,6 +6,22 @@ TabBarItem = function(el) {
   this._buildItem();
 };
 TabBarItem.prototype = {
+  // Factory for creating an item from a given javascript object
+  create: function(itemData) {
+    var item = document.createElement('a');
+    item.className = 'tab-item';
+
+    if(itemData.icon) {
+      var icon = document.createElement('i');
+      icon.className = itemData.icon;
+      item.appendChild(icon);
+    }
+    item.appendChild(document.createTextNode(itemData.title));
+
+    return new TabBarItem(item);
+  },
+
+
   _buildItem: function() {
     var _this = this, child, children = Array.prototype.slice.call(this.el.children);
 
@@ -30,7 +46,6 @@ TabBarItem.prototype = {
 
     ionic.on('tap', this._tapHandler, this.el);
   },
-
   onTap: function(e) {
     console.log('On tap');
   },
@@ -114,7 +129,10 @@ TabBar.prototype = {
     }
 
     // Select the new item
-    this.selectedItem && this.selectedItem.setSelected(true);
+    if(this.selectedItem) {
+      this.selectedItem.setSelected(true);
+      this.onTabSelected && this.onTabSelected(this.selectedItem, index);
+    }
   },
 
   // Select the given item assuming we can find it in our

hacking/TabBarController.js

@@ -5,20 +5,26 @@ TabBarController = function(options) {
 
   this._bindEvents();
 
-  this.controllers = [];
+  this.controllers = options.controllers || [];
 
   // Bind or set our tabWillChange callback
   this.controllerWillChange = options.controllerWillChange || function(controller) {};
   this.controllerChanged = options.controllerChanged || function(controller) {};
+
+  this.setSelectedController(0);
 };
 
 TabBarController.prototype = {
   // Start listening for events on our tab bar
   _bindEvents: function() {
-    this.tabBar.onTabSelected = function(e) {
+    var _this = this;
+
+    this.tabBar.onTabSelected = function(item, index) {
+      _this.setSelectedController(index);
     };
   },
 
+
   selectController: function(index) {
     var shouldChange = true;
 
@@ -38,8 +44,26 @@ TabBarController.prototype = {
 
   // Force the selection of a controller at the given index
   setSelectedController: function(index) {
+    if(index >= this.controllers.length) {
+      return;
+    }
     this.selectedController = this.controllers[index];
     this.selectedIndex = index;
+
+    this._showController(index);
+    this.tabBar.setSelectedItem(index);
+  },
+
+  _showController: function(index) {
+    var c;
+
+    for(var i = 0, j = this.controllers.length; i < j; i ++) {
+      c = this.controllers[i];
+      c.el.style.display = 'none';
+    }
+
+    c = this.controllers[index];
+    c.el.style.display = 'block';
   },
 
   _clearSelected: function() {
@@ -66,6 +90,13 @@ TabBarController.prototype = {
   addController: function(controller) {
     this.controllers.push(controller);
 
+    var item = TabBarItem.prototype.create({
+      title: controller.title,
+      icon: controller.icon
+    });
+
+    this.tabBar.addItem(item);
+
     // If we don't have a selected controller yet, select the first one.
     if(!this.selectedController) {
       this.setSelectedController(0);

hacking/TabBarController.unit.js

@@ -10,10 +10,18 @@ describe('TabBarController', function() {
 
   it('Should add Controllers', function() {
     ctrl.addController({
-      title: 'Item 1'
+      title: 'Item 1',
+      icon: 'icon-home'
     });
 
     expect(ctrl.getController(0).title).toEqual('Item 1');
+
+    var items = ctrl.tabBar.getItems();
+    expect(items.length).toEqual(1);
+
+    expect(items[0].getTitle()).toEqual('Item 1');
+    expect(items[0].getIcon()).toEqual('icon-home');
+
   });
 
   it('Should set Controllers', function() {

hacking/tabs.html

@@ -16,8 +16,31 @@
         <h1 class="title">Tab Bars</h1>
       </header>
 
-      <main class="has-header">
+      <main class="has-header content">
-        
+        <div id="tab1">
+          <h2>Tab 1</h2>
+          <p>
+            Friends
+          </p>
+        </div>
+        <div id="tab2">
+          <h2>Tab 2</h2>
+          <p>
+            Friends
+          </p>
+        </div>
+        <div id="tab3">
+          <h2>Tab 3</h2>
+          <p>
+            Friends
+          </p>
+        </div>
+        <div id="tab4">
+          <h2>Tab 4</h2>
+          <p>
+            Friends
+          </p>
+        </div>
       </main>
       <nav id="tab-bar" class="tabs tabs-default">
         <a class="tab-item" href="#">
@@ -44,8 +67,14 @@
       // Grab the sections
       var tab = document.getElementById('tab-bar');
 
+      var tab1 = document.getElementById('tab1');
+      var tab2 = document.getElementById('tab2');
+      var tab3 = document.getElementById('tab3');
+      var tab4 = document.getElementById('tab4');
+
       var c = new TabBarController({
-        tabBar: new TabBar({ el: tab })
+        tabBar: new TabBar({ el: tab }),
+        controllers: [ { el: tab1 }, { el: tab2 }, { el: tab3 }, { el: tab4 }]
       });
     </script>
   </body>