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