route-example

route-example.js

import Component from "can-component";
import value from "can-value";

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

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

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

// components/page-login.js
const LoginPage = 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: "number",
    init() {
      route.data = this;
      route.register("{page}", {page: "home"});
      route.register("tasks/{taskId}", {page: "task"});
    },
    get pageComponentPromise() {
      if (!this.isLoggedIn) {
        var login = new LoginPage({
           //-> LoginPage can update isLoggedIn, but not the other way around
           isLoggedIn: value.to(this, "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: value.from(this, "isLoggedIn"), 
                  // Just passes the function
                  logout: this.logout.bind(this)
                });
              case "task"
                return new PageComponent({
                  // Two way binding
                  id: value.bind(this, "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; }
   }
});