forked from RubyLouvre/avalon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test3.html
132 lines (121 loc) · 5.26 KB
/
test3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>路由器的相关测试</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js">
</script>
<script>
require(["ready!", "mmRouter"], function() {
if (typeof console === "undefine") {
avalon.log = function(str) {
var div = document.createElement("div")
div.innerHTML = str
document.body.appendChild(div)
}
}
avalon.router.get("/", {
template: "<div>首页</div>",
callback: function() {
avalon.log("首页加载完毕")
}
})
avalon.router.get("/aaa", {
template: "<h1>这是第1个模板</h1>",
callback: function(a) {
avalon.log("aaa加载完毕")
}
})
avalon.router.get("/bbb/:bbb", {
templateUrl: function(a) {
return "template" + a + ".html"
}
})
avalon.router.get("/ccc", {
templateUrl: "template1.html",
})
avalon.history.start({basepath: "/avalon/"})
avalon.define("test", function(vm) {
vm.hash = function(a, e) {
location.hash = a
e.preventDefault()
}
})
avalon.scan()
})
var adjustIframe = function(id, end) {
var iframe = document.getElementById(id), time = 0, end = end || 30, intervalID
if (iframe) {
function callback() {
time = time + 1
if (time == end) {
clearInterval(intervalID)
}
var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
iframe.style.height = iheight + "px";
}
intervalID = setInterval(callback, 50)
}
}
window.onload = function(){
console.log( document.querySelectorAll("[ms-controller]") )
}
</script>
</head>
<body>
<div ms-controller="test">
<div ms-view></div>
<ul>
<li><a href="#!/aaa">1111</a></li>
<li><a href="#!/bbb/2">2222</a></li>
<li><a href="#!/bbb/3">3333</a></li>
<li><a href="#!/ccc">4444</a></li>
</ul>
<table class="table-doc">
<tr>
<th>名字</th><th width="80">默认值</th><th>说明</th>
</tr>
<tr>
<td colspan="3" align="center">配置参数</td>
</tr>
<tr>
<td>view</td><td>""</td> <td>容器的名字, ms-view="name"中的name</td>
</tr>
<tr>
<td>element</td><td> null </td> <td>容器元素,即ms-view所定义的元素节点</td>
</tr>
<tr>
<td>template</td> <td> null </td><td>字符串或函数，如果是函数会将入路由的参数与将路由对象作为this,
最后返回容器要添加的HTML模板</td>
</tr>
<tr>
<td>templateUrl</td> <td>null</td><td>字符串或函数，如果是函数会将入路由的参数与将路由对象作为this，
最后将返回一个URL地址，框架通过它得到template。template会缓存到路由对象上</td>
</tr>
<tr>
<td>templates</td> <td>{}</td><td>如果存在templateUrl，它会通过ajax请求加载对应的模块，缓存在这里</td>
</tr>
<tr>
<td>regexp</td> <td></td> <td>路由规则对应的正则</td>
</tr>
<tr>
<td>path</td> <td></td> <td>地址中被配匹的部分</td>
</tr>
<tr>
<td>args</td> <td>[]</td><td>抽取路由规则中的参数名对应的实际值放在这里</td>
</tr>
<tr>
<td>params</td><td>{}</td> <td>将路由规则中的参数名与对应的实际值 以键值对形式 构成一个对象</td>
</tr>
<tr>
<td>callback(params)</td> <td></td><td> 当模板插入后，执行的回调函数，参数为args，值为路由对象</td>
</tr>
<tr>
<td>query</td> <td>{}</td><td> 地址栏上的query组成的对象</td>
</tr>
</table>
</div>
</body>
</html>