Decorators

ionic/components.js

@@ -14,6 +14,7 @@ export * from 'ionic/components/list/list'
 export * from 'ionic/components/nav-pane/nav-pane' //TODO remove
 export * from 'ionic/components/nav/nav'
 export * from 'ionic/components/nav/nav-item'
+export * from 'ionic/components/nav/decorators'
 export * from 'ionic/components/radio/radio-button'
 export * from 'ionic/components/radio/radio-group'
 export * from 'ionic/components/search-bar/search-bar'

ionic/components/app/test/barkpark/main.js

@@ -168,6 +168,8 @@ class IonicApp {
         nav.push(PostDetail, data);
       })
 
+      route.otherwise('/login');
+
     }, 200);
   }
 }

ionic/components/app/test/hn/pages/single.html

@@ -0,0 +1,5 @@
+<ion-view [view-title]="post.title">
+  <ion-content>
+    <h2>SINGLE</h2>
+  </ion-content>
+</ion-view>

ionic/components/app/test/hn/pages/single.js

@@ -0,0 +1,15 @@
+import {For, Ancestor, Descendent, Parent, NgElement, Component, View as NgView, bootstrap} from 'angular2/angular2';
+import {View, Content, Nav, NavPane, List, Item} from 'ionic/ionic';
+
+import {HackerNews} from 'hn'
+
+@Component({ selector: 'top-stories' })
+@NgView({
+  templateUrl: 'pages/top.html',
+  directives: [View, Content, For, List, Item]
+})
+export class HNSinglePost {
+  constructor(@Parent() viewport: Nav) {//, @Ancestor() app: HNApp) {
+    console.log('SINGLE');
+  }
+}

ionic/components/app/test/hn/pages/top.html

@@ -2,7 +2,7 @@
   <ion-content>
   <!--<h1>That's so <i>HACKER NEWS</i></h1>-->
     <ion-list>
-      <ion-item *for="#story of stories">
+      <ion-item *for="#story of stories" push-to="single">
         {{story.title}}
       </ion-item>
     </ion-list>

ionic/components/app/test/hn/pages/top.js

@@ -1,19 +1,31 @@
 import {For, Ancestor, Descendent, Parent, NgElement, Component, View as NgView, bootstrap} from 'angular2/angular2';
-import {View, Content, Nav, NavPane, List, Item} from 'ionic/ionic';
+import {PushToNav, View, Content, Nav, NavPane, List, Item} from 'ionic/ionic';
 
 import {HackerNews} from 'hn'
 
 @Component({ selector: 'top-stories' })
 @NgView({
   templateUrl: 'pages/top.html',
-  directives: [View, Content, For, List, Item]
+  directives: [View, Content, For, List, Item, PushToNav]
 })
 export class HNTopStories {
   constructor(@Parent() viewport: Nav) {//, @Ancestor() app: HNApp) {
     console.log('TOP STORIES');
 
-    this.stories = [];
+    this.stories = [{
+      by: "FatalLogic",
+      descendants: 77,
+      id: 9444675,
+      //kids: Array[26]
+      score: 464,
+      text: "",
+      time: 1430116925,
+      title: "Under Pressure",
+      type: "story",
+      url: "http://minusbat.livejournal.com/180556.html"
+    }];
 
+    return;
     var APIUrl = 'https://hacker-news.firebaseio.com/v0';
     this.fb = new Firebase(APIUrl);
     this.fb.child('topstories').limitToFirst(20).once('value', (snapshot) => {
@@ -27,6 +39,7 @@ export class HNTopStories {
         this.fb.child("item").child(itemID).on('value', (data) => {
           setTimeout(() => {
             console.log(itemID, data.val());
+            console.log('ADDED');
             this.stories.push(data.val());
           });
 

ionic/components/nav/decorators.js

@@ -0,0 +1,25 @@
+import {
+  Decorator,
+  View as NgView,
+  For,
+  NgElement,
+  Parent,
+  Ancestor
+} from 'angular2/angular2';
+import {Optional} from 'angular2/di'
+import {Nav} from 'ionic/ionic';
+
+@Decorator({
+  selector: '[push-to]'
+})
+export class PushToNav {
+  constructor(
+    element: NgElement,
+    @Ancestor() viewportNav: Nav
+  ) {
+    console.log('PUSH TO NAV', element.domElement, viewportNav);
+
+    this.navTag = element.domElement.getAttribute('push-to');
+    console.log('PUSH TO NAV', this.navTag);
+  }
+}

ionic/routing/router.js

@@ -11,19 +11,12 @@ export class Router {
     let path = hash.slice(1);
 
     let routeParams = {};
-    let found = false
 
     for(let route of this.routes) {
-      // Either we have a direct string match, or 
-      // we need to check the route more deeply
-      // Example: /tab/home
-      if(route.url == path) {
-        found = true
-      } else if((routeParams = this.matchRoute(route, path))) {
-        found = true;
-      }
 
-      if(found) {
+      routeParams = route.match(path);
+
+      if(routeParams !== false) {
         route.exec(this.buildRouteParams(routeParams));
         return
       }
@@ -32,10 +25,58 @@ export class Router {
     return this.noMatch();
   }
 
-  // Check a specific route against a given path
-  matchRoute(route, path) {
+  buildRouteParams(routeParams) {
+    routeParams._route = {
+      path: window.location.hash.slice(1)
+    }
+    return routeParams;
+  }
+
+  noMatch() {
+    // otherwise()?
+    return {}
+  }
+
+  on(path, cb) {
+    let route = new Route(path, cb);
+    this.routes.push(route);
+    this.match();
+    return route;
+  }
+
+  otherwise(path) {
+    let routeParams = {}
+    for(let route of this.routes) {
+      if((routeParams = route.match(path)) !== false) {
+        console.log('OTHERWISE: route matched:', route.url);
+        route.exec(routeParams)
+      }
+    }
+  }
+}
+
+export class Route {
+  constructor(url, handler) {
+    this.url = url;
+    this.handler = handler;
+  }
+  match(path) {
+    let routeParams = {}
+
+    // Either we have a direct string match, or 
+    // we need to check the route more deeply
+    // Example: /tab/home
+    if(this.url == path) {
+      return {}
+    } else if((routeParams = this._matchParams(path))) {
+      return routeParams
+    }
+    return false
+  }
+
+  _matchParams(path) {
     var parts = path.split('/');
-    var routeParts = route.url.split('/');
+    var routeParts = this.url.split('/');
 
     // Our aggregated route params that matched our route path.
     // This is used for things like /post/:id
@@ -64,32 +105,6 @@ export class Router {
     }
     return routeParams;
   }
-
-  buildRouteParams(routeParams) {
-    routeParams._route = {
-      path: window.location.hash.slice(1)
-    }
-    return routeParams;
-  }
-
-  noMatch() {
-    // otherwise()?
-    return {}
-  }
-
-  on(path, cb) {
-    let route = new Route(path, cb);
-    this.routes.push(route);
-    this.match();
-    return route;
-  }
-}
-
-export class Route {
-  constructor(url, handler) {
-    this.url = url;
-    this.handler = handler;
-  }
   exec(matchParams) {
     this.handler(matchParams)
   }