route-example

route-example.js

// components/page-home.js
var PageHome = Component.extend({
  tag: "page-home",
  //...
});

// components/page-task.js
var PageTask = Component.extend({
  tag: "page-task",
  //...
});

// components/page-products.js
var PageProducts = Component.extend({
  tag: "page-products"
});

// components/page-login.js
var PageLogin = Component.extend({
  tag: "page-login",
  //...
});

Component.extend({
  tag: "my-app",
  view: `
     {{#pageComponentPromise.isPending}}
       Loading ...
     {{/}}
     {{#pageComponentPromise.isResolved}}
       {{pageComponentPromise.value}}
     {{/}}
     {{#pageComponentPromise.isRejected}}
       {{pageComponentPromise.reason}}
     {{/}}`
  ViewModel: {
    page: "string",
    taskId: "string",
    init(){
      route.data = this;
      route.register("{page}",{page: "home"});
      route.register("tasks/{taskId}",{page: "task"});
    },
    get pageComponentPromise(){
      if(!this.isLoggedIn) {
        var login = new PageLogin({
           //-> PageLogin can update isLoggedIn, but not the other way around
           isLoggedIn: this.to("isLoggedIn") 
        })
        return Promise.resolve(login);
      } else {
         var page = this.page;
         return steal.import(`pages/${page}`).then(PageComponent => {
            switch(page){
              case "home":
                return new PageComponent({
                  // one way binding in
                  isLoggedIn: this.from("isLoggedIn"), 
                  // Just passes the function
                  logout: this.logout.bind(this);
                });
              case "task"
                return new PageComponent({
                  // Two way binding
                  id: this.bind("taskId"), 
                  logout: this.logout.bind(this);
                });
              default: 
                var page404 = document.createElement("div");
                page404.innerHTML = "Not Found";
                return page404;
            }
         });
      }
    },
    isLoggedIn: {default: false, type: "boolean", serialize: false},
    logout() { this.isLoggedIn = false; }
   }
});