Multiple Page Application Using CanJS

Question

I am looking for a way to navigate from one html page to another html page in CanJS. Below is the scenario:

index.html contains a login form (build using ejs) with forgot password link.

index.html

<div id="container"></div>

control.js

    var loginForm=can.Control({
        init:function(element,options)
        {
          var frag=can.view('login.ejs',this.options);
          this.element.html(frag);
        },
        '#forgotPasswordLink click':function(el,ev)
        {
          //Wants to pass the control to forgotpassword.html. 
          //Also wants to pass the flow to forgotpassword controller with some data
        }
    })

new loginForm('#container',{data:data})

My requirement is when I click on the forgot password link, current page should navigate to forgotpassword.html.

One way is to fill the href attribute of link in ejs but that is not a good practice,as current page controls will loose their significance. I am looking for an optimised solution.Please correct me if I am wrong

On the web, I found mostly single page application examples for CanJS. If somebody can point me to multiple page application demo/example, that would be awesome.

Thanks in advance :)

Answer 1

The easiest way to navigate from webpage to webpage via JavaScript is using the Window.location property:

var App = can.Control.extend({
  defaults : {
    view : 'login.ejs',
    data : null
  }
}, {
  init : function(el, op) {
    el.html(can.view(op.view, {data : op.data}));
  }, 
  '#forgotPasswordLink click' : function(el, ev) {
    ev.preventDefault();

    window.location = 'forgotpassword.html';
  }
});

var app = new App('#container', {data : 'hello'});