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 :)

You are not doing Single Page App? I mean with multiple view but in a single file! — Cherif BOUCHELAGHEM, Apr 19 '14 at 02:34
@CherifBOUCHELAGHEM No I want to use multiple html files. Do not want to reload a div again and again — Ankur Aggarwal, Apr 19 '14 at 06:56

gurun8 · Answer 1 · 2014-04-19T13:01:42.647

0

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'});

edited Apr 19 '14 at 13:01

answered Apr 19 '14 at 01:13

gurun8

3,526
12
36
53

What if I need to pass some data to forgotpssword controller loaded on forgotpassword.html from App controller? – Ankur Aggarwal Apr 19 '14 at 06:51
Without seeing what you're asking about, it's hard to understand your requirements but you always have the query string available to you. You could do something like 'forgotpassword.html?foo=bar' or 'forgotpassword.html?' + $.param({foo : 'bar'}); if you want to leverage the jQuery.param() method. You can also use localStorage (https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Local_Storage) to store application specific data. – gurun8 Apr 19 '14 at 12:56

Multiple Page Application Using CanJS

1 Answers1