<!DOCTYPE html> |
<html> |
<head> |
<title>mmRouter组件</title> |
<meta charset="UTF-8"> |
<meta name="viewport" content="width=device-width"> |
<script src="../avalon.modern.js"></script> |
|
<style> |
.header{ |
background-color: #ccc; |
height:40px; |
} |
body { |
overflow-x: hidden; |
} |
.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; |
} |
.slider{ |
width: 200%; |
overflow: hidden; |
} |
.oni-mmRouter-leave { |
position: relative; |
margin-left: 0; |
/*z-index: -1; */ |
} |
.oni-mmRouter-slide { |
width: 50%; |
float: left; |
display: inline; |
background: #fff; |
} |
</style> |
<script > |
avalon.config({debug: false}) |
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'}" |
arg: "{contactId: 1, itemID: 'b', query:{t: '" + i + "',c:'c"+i+"'}}" |
}) |
} |
require(["ready!", "mmRouter/mmState", "loading/avalon.loading", "mmRequest/mmRequest", "animation/avalon.animation"], function() { |
//一个顶层VM |
avalon.define({ |
$id: "test", |
codes: cs, |
c: function() { |
avalon.vmodels.test.count += 2 |
return avalon.vmodels.test.count |
}, |
count: 1, |
run: function(id) { |
var code = document.getElementById(id) |
if(!code) return |
code = code.value |
eval(code) |
}, |
$skipArray: ["count"] |
}) |
avalon.define({ |
$id: "usVmodelAsController", |
name: "skipper", |
$onRendered: function() { |
} |
}) |
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", { |
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" |
} |
} |
}).state("about", { |
url: "/about", |
views: { |
"": { |
templateProvider: new Promise(function(fn) { |
fn('<p class="lead">UI-Router Resources</p><ul>' + |
'<li>薩瓦迪卡</li>' + |
'</ul>') |
}) |
}, |
"hint@": { |
template: "当前状态是about" |
} |
} |
}).state("contacts", { |
abstract: true, |
url: "/contacts", |
templateUrl: "contacts.html", |
// 通过promise配置一个控制器 |
// controllerProvider: function(params) { |
// var prom = new Promise(function(rs, rj) { |
// require(["mmRouter/js/contacts.js"], function($ctrl) { |
// rs($ctrl) |
// }) |
// }) |
// return prom |
// }, |
controllerUrl: ["mmRouter/js/contacts.js"], |
onEnter: function() { |
} |
}).state("contacts.list", { |
url: "", |
views: { |
"": { |
templateUrl: "contacts.list.html" |
}, |
"hint@": { |
template: "当前状态是contacts.list", |
controllerProvider: function() { |
// return {} |
var _rs, |
pro = new Promise(function(rs, rj) { |
_rs = rs |
setTimeout(function() { |
rs({ |
$onRendered: avalon.noop |
}) |
// rj("faild") |
}, 1) |
}) |
return pro |
} |
}, |
"complex@": { |
template: "<font color='red'>默认内容内不能包含ms-view-这是由于现在的设计造成的，可以后续考虑重写ms-view的逻辑</font>" |
} |
} |
}).state("contacts.detail", { |
url: "/{contactId}", |
// state级别的数据准备 |
onEnter: function(a) { |
avalon.vmodels.contacts.id = a |
}, |
views: [ |
{ |
templateUrl: "contacts.detail.html", |
// 只要是query或者params变化，屏蔽掉通过innerHTML重写视图 |
ignoreChange: function(changeType) { |
// if(changeType) return true |
}, |
controller: function($ctrl) { |
// 视图元素scan完成后回调 |
$ctrl.$onRendered = function() { |
} |
} |
}, |
{ |
name: "tip", |
templateProvider: function(params) { |
return "当前ID是" + params.contactId + "<div ms-view=\"complex\"></div>" |
} |
}, |
{ |
name: "hint@", |
template: "当前状态是 {{id}} contacts.detail", |
controller: "contacts" |
}, |
{ |
name: "complex@contacts.detail", |
template: "<font color='red'>我只有呵呵了 -- {{name}}</font>", |
// 把一个符合controller规范的vmodel用来生成$ctrl |
controller: "usVmodelAsController" |
} |
] |
}).state("contacts.detail.item", { |
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" |
//, viewCache: false |
}, |
'hint@': { |
template: "当前状态是contacts.detail.item" |
} |
} |
}).state("contacts.detail.item.edit", { |
views: { |
"@contacts.detail": { |
templateUrl: "contacts.detail.item.edit.html", |
controller: function($ctrl) { |
// 视图被关闭时候回调 |
$ctrl.$onBeforeUnload = function() { |
return confirm("还没有保存呢，确认退出?") |
} |
} |
}, |
"hint@": { |
template: "当前状态是contacts.detail.item.edit" |
} |
} |
}) |
var confirmed |
avalon.state.config({ |
// 全局的onBeforeUnload |
onBeforeUnload: function(from, to) { |
if(confirmed) return |
if(to && to.stateName.indexOf("contacts") == 0) { |
confirmed = confirm("读取contacts需要授权，确认授权？") |
return confirmed |
} |
}, |
onAbort: function(from, to) { |
}, |
onBegin: function(from, to) { |
var loading = avalon.vmodels.loading |
if(loading) loading.toggle = true |
}, |
onLoad: function(from, to) { |
var loading = avalon.vmodels.loading |
if(loading) loading.toggle = false |
}, |
onError: function(keyname, state) { |
console.log(arguments) |
// avalon.router.navigate("/", {replace: true}) |
}, |
onViewEnter: function(newNode, oldNode) { |
avalon(oldNode).animate({ |
marginLeft: "-100%" |
}, 500, function() { |
oldNode.parentNode && oldNode.parentNode.removeChild(oldNode) |
}) |
|
} |
}) |
//启动路由 |
avalon.history.start({ |
// basepath: "/mmRouter", |
fireAnchor: false, |
routeElementJudger: function(ele, href) { |
ele = avalon(ele) |
if(ele.hasClass("route-ele")) return true // return href |
} |
}) |
//go!!!!!!!!! |
avalon.scan() |
}) |
|
</script> |
</head> |
<body ms-controller="test" |
mss-widget="loading,loading" data-loading-type="img" data-loading-modal-background="#ccc" data-loading-modal-opacity="0.5"> |
<h1>mmRouter试验田: 最新版mmRouter试验田</h1> |
<div style="overflow:hidden;"> |
<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> <a href="/about" class="route-ele">about</a> |
<p class="hint" ms-view="hint" |
ms-class="b2"></p> |
</div> |
<div class="oni-helper-clearfix slider oni-helper-reset"> |
<div ms-view class="oni-mmRouter-slide"></div> |
</div> |
</div> |
|
</body> |
</html> |