forked from RubyLouvre/avalon
/
index02duplex.html
121 lines (113 loc) · 4.46 KB
/
index02duplex.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
<!DOCTYPE html>
<html>
<head>
<title>ms-duplex</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" type="text/javascript"></script>
<script>
var model = avalon.define("model", function(vm) {
vm.textModel = "text";
vm.passwordModel = "password"
vm.radioModel = true;
vm.checkRadio = true;
vm.selectModel = "bbb";
vm.checkboxModel = ["aaa", "bbb"];
vm.checkboxText = vm.checkboxModel.join(",")
vm.sex = "1"
});
var qinerg = avalon.define("qinerg", function(vm) {
vm.sex = "";
vm.lang = []
vm.langtext = ""
});
qinerg.lang.$watch("length", function() {
qinerg.langtext = qinerg.lang.join(",")
})
model.checkboxModel.$watch("length", function() {
model.checkboxText = model.checkboxModel.join(",")
})
</script>
<style>
.parent{
height:50px;
width:100%;
overflow:hidden;
}
.visible{
width:400px;
height: 50px;
background: red;
float:left;
}
.if{
width:400px;
height: 50px;
background: blueviolet;
float:left;
}
fieldset{
background:#d2d2d2;
}
</style>
</head>
<body >
<div ms-controller="model">
<h3 style="text-align: center">ms-duplex</h3>
<input ms-duplex="textModel" ms-data-observe="radioModel"/>
<input ms-duplex="passwordModel" type="password"/>
<input type="radio" ms-duplex="radioModel"> <input type="checkbox" ms-duplex-radio="checkRadio">
<select ms-duplex="selectModel">
<option value="aaa" selected>aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<input ms-duplex="checkboxModel" type="checkbox" value="aaa" />
<input ms-duplex="checkboxModel" type="checkbox" value="bbb" />
<input ms-duplex="checkboxModel" type="checkbox" value="ccc" />
<input ms-duplex-text="sex" type="radio" value="1"/>
<input ms-duplex-text="sex" type="radio" value="2"/>
<input ms-duplex-text="sex" type="radio" value="3"/>
{{sex}}
<p>text, password, textarea要求对应的VM属性为字符串，select、checkbox为字符串数组，radio为布尔，我们可以通过ms-duplex-radio让checkbox对应一个布尔，ms-duplex-text让radio对应一个字符串 </p>
<div class="parent">
<div ms-visible="radioModel" class="visible">
<div>ms-visible这个区域是受到radioModel控制</div>
<div>data-observe为{{radioModel}}</div>
</div>
<div ms-if="checkRadio" class="if">
<div> ms-if这个区域是受到checkRadio控制</div>
</div>
</div>
<fieldset>
<legend>textModel</legend>
<p>{{textModel}}</p>
</fieldset>
<fieldset>
<legend>passwordModel</legend>
<p>{{passwordModel}}</p>
</fieldset>
<fieldset>
<legend>radioModel</legend>
<p>{{radioModel}}</p>
</fieldset>
<fieldset>
<legend>selectModel</legend>
<p>{{selectModel}}</p>
</fieldset>
<fieldset>
<legend>checkboxModel</legend>
<p>{{checkboxText}}</p>
</fieldset>
</div>
<div ms-controller='qinerg' >
<p><input type="radio" ms-duplex-text="sex" value="man">男
<input type="radio" ms-duplex-text="sex" value="woman">女</p>
<p>
<input type="checkbox" ms-duplex="lang" value="#C">#C
<input type="checkbox" ms-duplex="lang" value="java">java
<input type="checkbox" ms-duplex="lang" value="ruby">ruby
</p>
<P>{{sex}} {{langtext}}</P>
</div>
</body>
</html>