master

分支 (1)

管理

管理

master

icedog.javascript.test
/
jquery
/
06
/
index-routes.html

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="../../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/jquery-sammy-v0.7.6/sammy.js" type="text/javascript" charset="utf-8"></script>
		<title>jquery.sammy</title>
	</head>

	<body>
		<p>jquery.sammy <b>route</b></p>
		<p>sammy的路由中verb的值为get的时候仅仅监听了<b> hash changes</b>,其余的post 、put、delete则只监听的表 单(form)的submit事件，因此ajax的请求不会触发路由
		</p>
		<p>对于同一路由只会绑定第一个，后续的不会触发</p>
		<hr />
		<a href="#/">#/</a>
		<a href="#/hi-route">#/hi-route</a>
		<a href="#/hi-get">#/hi-get</a>
		<a href="#/color">#/color</a>
		<a href="#/by-name/quirkey">#/by-name/quirkey</a>
		<a href="#/child/a/b/c/d">#/child/a/b/c/d</a>
		<div id="main1">
			<p class="welcome"></p>
			<p class="hello-world"></p>
			<form action="#/post/form" method="PUT">
				<label>First Name</label><br />
				<input type="text" name="first_name" />
				<input type="submit" value="Submit" />
			</form>
		</div>
		<div id="main2">

		</div>
		<script type="text/javascript">
			//$.sammy 和 Sammy 等价 ，默认使用的app节点为body节点
			var app = $.sammy('#main1', function(contextSammy) {
				var sam = contextSammy;
				//context 和 this 相等
				debugger;
				//http://sammyjs.org/docs/routes
				//this.get, post, put, delete(del)
				//#/, test/path/, #/my_path/:var
				this.get('#/', function(context, nextRoute) {
					debugger;
					$('.welcome').text('Welcome! by $.sammy');
					$.get('data/hello-world.html', function(data, status, promise) {
						debugger;
						// save the data somewhere
						$(data).appendTo('.hello-world');
						sam.log('step one is loaded;');
						nextRoute();
					});
				}, function(context, nextRoute) {
					debugger;
					$.get('data/hello-world.html', function(data, status, promise) {
						debugger;
						// save the data somewhere
						$(data).css({
							'font-size': '30px',
							'color': 'green'
						}).appendTo('.hello-world');
						sam.log('step two is loaded;');
						nextRoute();
					});
				}, function() {
					sam.log('all data is loaded;');
				});
				// route(verb, path, callback)
				this.route('get', '#/hi-route', function(context, nextRoute) {
					alert('hi by this.route');
				});
				// verb(path, callback)
				this.get('#/hi-get', function(context, nextRoute) {
					alert('hi by this.get');
				});
				this.put('#/post/form', function() {
					alert('put to #/post/form');
					return false;
				});
				this.get(/#\/color/, function() {
					alert('start with color request');
				});
				this.get('#/by-name/:name', function() {
					alert(this.params['name']);
				});
				this.get(/\#\/child\/(.*)/, function() {
					alert(this.params['splat']);
				});
			}).run('#/');

			//如果有使用到dom则应该在此运行app
			//			$(function () {
			//				app.run('#/');
			//			});

			/*
			var app = Sammy('#main2', function() {
				this.get('#/', function() {
					$('#main2').text('Welcome! by Sammy');
				});
			}).run('#/');
			*/
		</script>
	</body>

</html>