stateman
Version:
A tiny foundation that providing nested state-based routing for complex web application.
74 lines (63 loc) • 2.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StateMan API test</title>
<script src="../stateman.js"></script>
</head>
<body>
<h2>OPEN console to find the log</h2>
<ul>
<li><strong>(app)</strong> <a href="#/app">/app </a></li>
<li><strong>(app.contact)</strong> <a href="#/app/contact">/app/contact </a></li>
<li><strong>(app.contact.message)</strong> <a href="#/app/contact/message">/app/contact/message </a></li>
<li><strong>(app.contact.detail)</strong> <a href="#/app/contact/2?name=leeluolee">/app/contact/2?name=leeluolee </a></li>
<li><strong>(app.contact.detail.setting)</strong> <a href="#/app/contact/2/setting">/app/contact/2/setting </a></li>
<li><strong>(app.contact.detail.setting)</strong> <a href="#/app/contact/3/setting">/app/contact/3/setting </a></li>
<li><strong>(app.user.list)</strong> <a href="#/app/user">/app/user </a></li>
</ul>
<script>
var config = {
enter: function(option){ console.log("enter: " + this.name + "; param: " + JSON.stringify(option.param)) },
leave: function(option){ console.log("leave: " + this.name + "; param: " + JSON.stringify(option.param)) },
update: function(option){ console.log("update: " + this.name + "; param: " + JSON.stringify(option.param)) },
}
function cfg(o){
o.enter = o.enter || config.enter
o.leave = o.leave || config.leave
o.update = o.update || config.update
return o;
}
var stateman = new StateMan();
stateman.state({
"app": config,
"app.contact": config,
"app.contact.detail": cfg({url: ":id(\\d+)"}),
"app.contact.detail.setting": config,
"app.contact.message": config,
"app.user": cfg({
enter: function(option){
var done = option.async();
console.log(this.name + "is pending, 1s later to get into next state")
setTimeout(done, 1000)
},
leave: function(){
console.log(this.name + "is pending, 1s later to leave out")
return new Promise(function(resolve){
setTimeout(resolve, 1000)
})
}
}),
"app.user.list": cfg({url: ""})
}).on("notfound", function(){
this.go('app') // if not found
}).start();
stateman.on("begin", function(option){
if(option.current.name === 'app.contact.message' && option.previous.name.indexOf("app.user") === 0){
option.stop();
alert(" nav from 'app.user.*' to 'app.contact.message' is stoped");
}
})
</script>
</body>
</html>