<!DOCTYPE html>
<html>
<head>
<title>mmRouter组件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js"></script>
<style>
.header{
background-color: #ccc;
height:40px;
}
.header a{
width:140px;
display: inline-block;
text-decoration: none;
text-align: center;
font-weight: bolder;
font-size: 16px;
height:40px;
line-height: 40px;
position: relative;
}
.header .hint{
position: absolute;
top: 8px;
right: 40px;
}
.codelist li{
list-style-type: none;
float: left;
display: inline;
margin-right: 10px;
}
</style>
<script >
avalon.config({debug: true})
var root = location.pathname.split("avalon.mmRouter")[0]
var cs = [], arr = "contacts.detail.item.edit".split(".")
for(var i = 0; i < arr.length; i++) {
cs.push({
state: i ? arr.slice(0, i+1).join(".") : "contacts.list",
arg: "{contactId: 1, itemID: 'b', query:{t: '" + i + "',c:'c"+i+"'}}"
})
}
require(["ready!", "mmRouter/mmState"], function() {
//一个顶层VM
avalon.define({
$id: "test",
codes: cs,
run: function(id) {
var code = document.getElementById(id)
if(!code) return
code = code.value
eval(code)
},
count: 0
})
avalon.state.config({
onLoad: function() {
avalon.log("onload")
avalon.log(this.params)
avalon.log(this.path)
},
onUnload: function() {
avalon.log("unload")
avalon.log(this.params)
}
})
// avalon.router.get("/*path", function() {
// console.log(arguments)
// })
//接着下来通过mmState这个基于状态机的高级路由器，定义各种状态
//（每个状态包含各个要处理的模板容器，获取模板的手段，中途会发生的各种回调）
//////////////
// hone //
/////////////
avalon.state("home", {
controller: "test",
url: "/",
views: {
"": {
template: '<p class="lead">Welcome to the UI-Router Demo</p>' +
'<p>Use the menu above to navigate. ' +
'Pay attention to the <code>$state</code> and <code>$stateParams</code> values below.</p>' +
'<p>Click these links—<a href="#!/contacts/1">Alice</a> or ' +
'<a href="#!/contacts/2">Bob</a>—to see a url redirect in action.</p>'
},
'hint@': {
template: "当前状态是home"
}
}
})
///////////
// about //
//////////
avalon.state("about", {
controller: "test",
url: "/about",
views: {
"": {
templateProvider: new Promise(function(fn) {
fn('<p class="lead">UI-Router Resources</p><ul>' +
'<li>薩瓦迪卡</li>' +
'</ul>')
})
},
"hint@": {
template: "当前状态是about"
}
}
})
//////////////
// contacts //
/////////////
avalon.state("contacts", {
controller: "test",
abstract: true,
url: "/contacts",
templateUrl: root + "contacts.html",
onEnter: function() {
if (!avalon.vmodels.contacts) {
var lastId
var vmodel = avalon.define({
$id: "contacts",
// $skipArray: ["contact", "item"],
edit: function() {
avalon.router.go("contacts.detail.item.edit", {
contactId: vmodel.contact.id
})
},
done: function() {
avalon.router.go("contacts.detail.item", {
contactId: vmodel.contact.id
})
},
goToRandom: function() {
var contacts = vmodel.contacts
var id = NaN
while (true) {
var index = Math.floor(Math.random() * contacts.length)
id = contacts[index].id
if (id !== lastId)//确保不重复
break
}
lastId = id
avalon.router.go("contacts.detail", {contactId: id})
},
contacts: [
{
id: 1,
name: "司徒正美",
items: [
{
"id": "a",
"type": "phone number",
"value": "555-1234-1234"
},
{
"id": "b",
"type": "email",
"value": "alice@mailinator.com"
}
]
}, {
id: 2,
name: "清风火羽",
"items": [
{
"id": "a",
"type": "blog",
"value": "http://bob.blogger.com"
},
{
"id": "b",
"type": "fax",
"value": "555-999-9999"
}
]
},
{
id: 3,
name: "光明之星",
"items": [
{
"id": "a",
"type": "blog",
"value": "http://bob.blogger.com"
},
{
"id": "b",
"type": "fax",
"value": "111-222-333"
}
]
},
{
id: 4,
name: "rubylouver",
"items": [
{
"id": "a",
"type": "blog",
"value": "http://bob.rubylouver.com"
},
{
"id": "b",
"type": "fax",
"value": "111-222-333"
}
]
}
],
id: NaN,
contact: {
},
item: {}
})
vmodel.$watch("id", function(a) {
vmodel.contact = (vmodel.contacts.filter(function(el) {
return el.id == a
}) || [{}])[0]
})
}
}
})
///////////////////
// contacts.list //
//////////////////
avalon.state("contacts.list", {
controller: "contacts",
url: "",
onBeforeLoad: function() {
avalon.log("contacts.list:onBeforeLoad")
},
onAfterLoad: function() {
avalon.log("contacts.list:onAfterLoad")
},
views: {
"": {
templateUrl: root + "contacts.list.html"
},
"hint@": {
template: "当前状态是contacts.list"
}
}
})
///////////////////
// contacts.detail //
//////////////////
avalon.state("contacts.detail", {
controller: "contacts",
url: "/{contactId}",
onEnter: function(a) {
avalon.vmodels.contacts.id = a
},
views: {
"": {
templateUrl: root + "contacts.detail.html"
},
'hint@': {
template: "当前状态是contacts.detail"
},
'tip@': {
template: "当前ID是{{contact.id}}"
}
}
})
//////////////////////////
// contacts.detail.item //
/////////////////////////
avalon.state("contacts.detail.item", {
controller: "contacts",
url: "/item/{itemID}",
onEnter: function() {
var itemID = this.params.itemID
var vmodel = avalon.vmodels.contacts
var el = vmodel.contact
if (el && el.items) {
for (var i = 0, elem; elem = el.items[i++]; ) {
if (elem.id == itemID) {
vmodel.item = elem;
break
}
}
}
},
views: {
"": {
templateUrl: "contacts.detail.item.html"
},
'hint@': {
template: "当前状态是contacts.detail.item"
}
}
})
///////////////////////////////
// contacts.detail.item.edit //
///////////////////////////////
avalon.state("contacts.detail.item.edit", {
views: {
"@contacts.detail": {
templateUrl: root + "contacts.detail.item.edit.html"
},
"hint@": {
template: "当前状态是contacts.detail.item.edit"
}
}
})
avalon.router.errorback = function() {
avalon.router.go("home", {}, {replace: true})
}
//启动路由
avalon.history.start({
basepath: root,
fireAnchor: false,
html5Mode: true
})
//go!!!!!!!!!
avalon.scan()
})
</script>
</head>
<body>
<h1>mmRouter综合示例五: html5Mode[pushState,popState]，可能需要服务器支持</h1>
<div ms-controller="test">
<ul class="codelist">
<li
ms-repeat-code="codes">
<textarea
ms-attr-id="'c'+$index" cols="30" rows="10"
ms-attr-value="'avalon.router.go(\''+code.state+'\','+code.arg+')'">
</textarea>
<p>
<button
ms-click="run('c'+$index)">点击到状态：{{code.state}}</button>
</p>
<li style="clear:both;display:block;float:none;"></li>
</li>
</ul>
<div class="header">
<a href="#!//">mmState</a> <a href="#!/contacts">contacts</a> <a href="#!/about">about</a>
<p class="hint" ms-view="hint"></p>
</div>
<div ms-view></div>
</div>
</body>
</html>