<!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> |