Skip to content

Instantly share code, notes, and snippets.

@ppillip

ppillip/backbonerouter.html

Created July 26, 2019 03:38
Show Gist options
  • Save ppillip/e4e1aa50934bf2407431dd9c70bc66ad to your computer and use it in GitHub Desktop.
Save ppillip/e4e1aa50934bf2407431dd9c70bc66ad to your computer and use it in GitHub Desktop.
Download ZIP
백본라우터 예제
Raw
backbonerouter.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="pragma" content="no-store">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Expires" content="1">
<title>REC 계약 관리 시스템</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="jquery-ui.min.css">
<script type="text/javascript" src='jquery-3.4.1.js'></script>
<script type="text/javascript" src='jquery-ui.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/:page": "search" // #search/kiwis/p7
},
help: function() {
jQuery('#content').html("@@@@헬프 컨텐츠 <br> 랜더링 되었음@@@@");
},
search: function(query, page) {
jQuery('#content').html("#### 서치 컨텐츠 <br> 랜더링 되었음 ["+query+"] ["+page+"] ####" );
}
});
var router = new Router;
Backbone.history.start();
$( document ).ready( function(){
$("button[name=button1]").on('click',function(){
window.location.href = "#/search/kiwis/1";
});
$("button[name=button2]").on('click',function(){
window.location.href = "#/search/kiwis/2";
});
$("button[name=button3]").on('click',function(){
window.location.href = "#/search/kiwis/3";
});
} );
</script>
</head>
<body>
<button type="button" name="button1">첫번째페이지</button>
<button type="button" name="button2">두번째페이지</button>
<button type="button" name="button3">세번째페이지</button>
</br></br><a href="#/help">헬프</a>
</br></br><a href="#/search/kiwis/3">서치 키위</a>
</br></br></br></br>
<div id="content">
메인페이지입니다
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment