CODEWITHSUNDEEP
javascriptbackbone.js
Humble Dolt
Humble Dolt

Reputation: 970

unable to see the page. No error is being shown in console

I am trying to create a backbone application having login page and one dashboard page called home so for that I have created router having two routes.

After login, I am redirecting to the dashboard page

But I am not seeing anything at all when I run index file. In the console also, no error is being shown.

var AppRoute = Backbone.Router.extend({

  routes: {
    "":        "login",  // #search/kiwis
    "home": "home"
  },

  login: function(){
  	var loginTemplate = _.template($('#loginPage_template').html());
	$('#htmlBodyContent').html(loginTemplate({}));
	$('#somlogin').click(function(e) {
    var loginData= {};
	loginData.userName=document.getElementById('userName').value;
	loginData.password=document.getElementById('password').value;
	console.log(loginData);
	if(loginData.userName==='admin' && loginData.password==='admin' ){
		console.log("login successfull")
			window.location.hash="#home";	
	}else{
		console.log("do not match")
	}


})
  }

  home: function() {
    console.log("welcom to home")
  }

});

var router = new Router();
		Backbone.history.start();
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">

</head>
<body>

        <div id="htmlBodyContent">

		</div>
<script type="text/template" id="loginPage_template">
<div class="container">
	
	<form class="login">
	<h6>dawai<h6>
	<input type="userName" class="form-control" id="userName" name="userName">
	
	<input type="password" class="form-control" id="password" name="password">
	<br>
	<button type="button" class="btn-sm" id="loginBtn" >login</button>

	</form>


</div>
</script>


<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="scripts/main.js"</script>




	
</body>
</html>

Upvotes: 0

Views: 56

Answers (1)

kkkkkkk
kkkkkkk

Reputation: 7748

I see you use window.location to navigate your application, that is the problem. You need to use Backbone router api to navigate:

login: function() {
  //...
    this.navigate('home', {trigger: true});
  //...
}

Upvotes: 2

Related Questions