Skip to content
Permalink
Browse files

第5回 Lesson2 クライアントサイド

  • Loading branch information...
ks-ocean committed May 20, 2015
1 parent 59c29b0 commit d4ae8a42ca598eb37fe84e4af34f17017da9be30
@@ -5,8 +5,16 @@
<title>シンプルTODOアプリ</title>
</head>
<body>
<!-- ヘッダ -->
<div id="header"></div>
<!-- コンテンツ -->
<div id="main"></div>

<!-- ヘッダのテンプレート -->
<script type="text/template" id="header-template">
<p>ユーザ:<%- username %>(<%- name %>) <input type="button" id="logout" value="ログアウト"></input></p>
<hr>
</script>

<!-- TODO一覧表示のレイアウトテンプレート -->
<script type="text/template" id="todo-layout-template">
@@ -53,9 +61,27 @@
</div>
</script>

<!-- ログイン画面テンプレート -->
<script type="text/template" id="login-layout-template">
<h2>ログイン</h2>
<div>
<p>ユーザ名 :<input type="text" id="username" placeholder="username" autofocus></input></p>
<p>パスワード:<input type="password" id="password" placeholder="password"></input></p>
<input type="button" id="login" value="ログイン"></input>
</div>
<hr>
<h2>ユーザ登録</h2>
<div>
<p>ユーザ名 :<input type="text" id="signup-username" placeholder="username"></input></p>
<p>氏名   :<input type="text" id="signup-name" placeholder="name"></input></p>
<p>パスワード:<input type="password" id="signup-password" placeholder="password"></input></p>
<input type="button" id="signup" value="登録"></input>
</div>
</script>

<!-- require -->
<script type="text/javascript" src="js/require-config.js"></script>
<script type="text/javascript" src="js/lib/require.js" data-main="main.js"></script>

</body>
</html>
@@ -3,19 +3,75 @@ console.log('load app');
define(function(require){
console.log('run app');
var Router = require('routers/router');
var UserModel = require('models/user-model');
var Application = Marionette.Application.extend({
initialize : function(){
console.log('app.initialize');
// Ajaxのエラーの共通ハンドラを設定
$(document).ajaxError(function ( e, xhr, options , message ) {
window.application.ajaxErrorHandler( e, xhr, options , message );
});
new Router();
//ログインユーザ情報をサーバから取得
this.loginUser = new UserModel();
this.getLoginUser();
},

onStart : function(){
Backbone.history.start();
},

regions : {
headerRegion : '#header',
mainRegion : '#main'
}
},

//ログインユーザ情報格納用
loginUser : null,

//ログインユーザ情報取得
getLoginUser : function(){
this.loginUser.getLoginUser(
this.onLoggedIn,
this.onNotLoggedIn
);
},

//ログインユーザ情報取得:ログイン済みの場合
onLoggedIn : function(){
window.application.start(); // applicaiton.start()はログインチェックの後
},

//ログインユーザ情報取得:未ログインの場合
onNotLoggedIn : function(){
window.application.clearLoginUser(); //ログイン情報をクリアしておく
window.application.start(); // applicaiton.start()はログインチェックの後
},

//ログイン済みか判定
isLoggedIn : function(){
return this.loginUser.isLoggedIn();
},

//ログインユーザ情報のクリア(ログアウト時)
clearLoginUser : function(){
this.loginUser.clear();
},

// ajaxのエラーを全てここでハンドリング
ajaxErrorHandler : function(e, xhr, options , message){
if( xhr.status === 401 ){
this.clearLoginUser();
// 未認証の場合ログイン画面に飛ばす
Backbone.history.navigate('#login', {trigger : true, replace : true});
}else if(xhr.status >= 400 && xhr.status < 500){
//ClientErrorの場合はメッセージ表示
alert(message);
}else if(xhr.status >= 500 && xhr.status < 600){
//ServerErrorの場合はメッセージ表示
alert(message);
}
},

});
return Application;
@@ -8,7 +8,5 @@ function(){
require(['app'], function(Application){
console.log('run main2');
window.application = new Application();
window.application.start();
console.log('app start');
});
});
@@ -0,0 +1,88 @@
//ログイン用モデル
define(function() {
var LoginModel = Backbone.Model.extend({

parse : function(response) {
if(response.message){
this.loginMessage = response.message;
}
return response.User;
},

loginMessage : null,

//ログイン済みかどうか判定
isLoggedIn : function(){
return this.get('id') ? true : false;
},

//ログイン中のユーザ情報取得
getLoginUser : function(onLoggedIn, onNotLoggedIn){
this.urlRoot = '/rest-study/users/loggedin';
this.fetch(
{
wait : true,
success : function(){
onLoggedIn();
},
error : function(){
onNotLoggedIn();
},
}
);
},

//ログインする
login : function(username, password, onLoginSuccess, onLoginError){
this.urlRoot = '/rest-study/users/login';
this.save(
{
username : username,
password : password
}, {
success : function(model){
if(model.get('id')){
onLoginSuccess(model.loginMessage);
}else{
onLoginError(model.loginMessage);
}
},
}
);
},

//ログアウトする
logout : function(onLogoutSuccess){
this.urlRoot = '/rest-study/users/logout';
this.save(
{},
{
success : function(model){
onLogoutSuccess(model.loginMessage);
},
}
);
},

//登録(サインアップ)する
signup : function(username, password, name, onSignUpSuccess, onSignUpError){
this.urlRoot = '/rest-study/users/signup';
this.save(
{
username : username,
password : password,
name : name
}, {
success : function(model){
if(model.get('id')){
onSignUpSuccess(model.loginMessage);
}else{
onSignUpError(model.loginMessage);
}
},
}
);
},
});
return LoginModel;
});
@@ -3,6 +3,10 @@ console.log('load controller');
define(function() {
console.log('run controller');
var TodoController = Marionette.Controller.extend({
login : function(){
//ログイン画面
this.nextView('views/login-layout-view', null, true);
},

todoLists : function() {
//Todoレイアウト用ビューにルーティング
@@ -13,12 +17,46 @@ define(function() {
this.nextView('views/todo-detail-layout-view', {modelId : id});
},

nextView : function(viewPath, option) {
nextView : function(viewPath, option, tryShowLoginScreen) {
if(window.application.isLoggedIn()){
//ログイン済み
if(tryShowLoginScreen){
//ログイン済みなのにログイン画面に遷移しようとしている場合は
//TODOリスト画面にルーティング
Backbone.history.navigate('#todo-lists', {trigger: true, replace: true});
return;
}
}else{
//未ログイン
if(!tryShowLoginScreen){
//未ログイン状態でログイン画面以外に遷移しようとしている場合は
//ログイン画面にルーティング
Backbone.history.navigate('#login', {trigger: true, replace: true});
return;
}
}
//ヘッダ表示
this.showHeaderRegion(tryShowLoginScreen);
//コンテンツ表示
require([viewPath], function(View){
window.application.mainRegion.show(new View(option));
});
},


showHeaderRegion : function(tryShowLoginScreen){
if(tryShowLoginScreen){
//ログイン画面遷移時はヘッダ非表示
window.application.headerRegion.empty();
}else if(!window.application.headerRegion.hasView()){
//ログイン画面以外遷移時、かつヘッダ未表示の場合ヘッダ表示
require(['views/header-view'], function(View){
window.application.headerRegion.show(new View({
model : window.application.loginUser
}));
});
}
}

});
return TodoController;
});
@@ -8,9 +8,10 @@ define(function(require) {
controller: new TodoController(),
//ルーティング設定
appRoutes : {
'' : 'todoLists',
'todo-lists' : 'todoLists',
'todo-lists/:id' : 'todoDetail'
'login' : 'login',
'' : 'todoLists',
'todo-lists' : 'todoLists',
'todo-lists/:id' : 'todoDetail'
},
});
return TodoRouter;
@@ -0,0 +1,33 @@
//ヘッダ用ビュー
define(function(require){
var UserModel = require('models/user-model');

var HeaderView = Marionette.ItemView.extend({

//テンプレート
template : '#header-template',

ui : {
logoutButton : '#logout',
},

//DOMイベントハンドラ設定
events : {
//ログアウトボタンクリック時
'click @ui.logoutButton' : 'onLogoutClick',
},

onLogoutClick : function(){
var userModel = new UserModel();
userModel.logout(this.onLogoutSuccess);
},

onLogoutSuccess : function(message){
window.application.clearLoginUser();
Backbone.history.navigate('#login', {trigger : true, replace : true});
console.log(message);
},

});
return HeaderView;
});

0 comments on commit d4ae8a4

Please sign in to comment.
You can’t perform that action at this time.