can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
119 lines (111 loc) • 4.91 kB
HTML
<html lang="en">
<head>
<title>can.Route</title>
<style type='text/css'>
body {font-family: verdana; font-size: 11px;}
.blue {color: #56638c; font-size: 12px}
.green {color: #007000;}
#data_update {width: 49%; float:right;}
#hash_update {width: 49%; float:left;}
#data_update_target, #hash_update_target {
height: 420px; overflow:scroll; border: 1px solid black;
}
.comments {height: 70px;}
</style>
</head>
<body>
<h1>can.Route Demo</h1>
<div><a href="/can/route/qunit.html">View qunit test results</a></div>
<br />
<div id="hash_update">
<div class="comments">
<span class="blue">Use these links to modify the hash or change it directly in the address bar:</span>
<br /><br />
URLs with a registered path:
<a href="#!pages/val1/val2/val3">#!pages/val1/val2/val3</a>
<a href="#!pages/val1//">#!pages/val1//</a>
<a href="#!pages///">#!pages///</a>
<a href="#!/val1/val2">#!/val1/val2</a>
<br />
URLs without paths:
<a href="#!pages//">#!pages//</a>
<a href="#!pages//">#!///</a>
<br />
Empty hash:
<a href="#!">#!</a>
</div>
<h2>Hash update events:</h2>
<div id="hash_update_target"></div>
</div>
<div id="data_update">
<div class="comments">
<form id="data_form">
Value1: <input type="text" id="var1" name="var1" /><br />
Value2: <input type="text" id="var2" name="var2" /><br />
Value3: <input type="text" id="var3" name="var3" />
<input name="submit" id="submit" type="submit" value="Change the data" />
</form>
</div>
<h2>Data update events:</h2>
<div id="data_update_target"></div>
</div>
<script type='text/javascript' src="../node_modules/steal/steal.js" main="@empty"></script>
<script type='text/javascript'>
steal(
'can/route',
'jquerypp/dom/form_params',
function() {
window.location.hash = "";
$('#data_update_target').html();
$('#hash_update_target').html();
var hash_cnt = 0, data_cnt = 0;
can.route.routes = {};
can.route("");
can.route("pages/:var1/:var2/:var3", {
'var1': 'default1',
'var2': 'default2',
'var3': 'default3'
});
can.route("/:var1/:var2", {
'var1': 'def1',
'var2': 'def2'
});
$(window).bind('hashchange', function() {
$('#hash_update_target').append( ++hash_cnt + ": Hash: <span class=\"green\">" + window.location.hash )
.append( "</span> Route data: " + JSON.stringify( can.route.data._data ) + "<br />" );
});
can.route.bind('change', function(ev, attr, how, newVal, oldVal){
$('#data_update_target').append( ++data_cnt + ": <span class=\"green\">" + showChange(attr, how, newVal, oldVal) )
.append( "</span> Route data: " + JSON.stringify( can.route.data._data ) + "<br />" );
});
showChange = function(attr, how, newVal, oldVal){
switch (how) {
case "set" :
$('#data_form > #' + attr).val(newVal);
return (how + " " + attr + ": " + oldVal + " => " + newVal);
break;
case "remove" :
$('#data_form > #' + attr).val('');
return (how + " " + attr);
break;
case "add" :
$('#data_form > #' + attr).val(newVal);
return (how + " " + attr + ": " + newVal);
break;
}
}
$('#data_form').bind('submit', function() {
data = $('#data_form').formParams();
for (var val in data) {
if (data[val] == "") {
delete data[val];
}
}
can.route.attr(data, true);
return false;
});
})
</script>
</body>
</html>