-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathhello-world-simple.html
93 lines (88 loc) · 3.72 KB
/
hello-world-simple.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
<!doctype html>
<html lang="en">
<head>
<title>modelview.js • Hello World (Simple Mode)</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="modelview.js • Hello World" />
<style type="text/css">
#forkongithub a{background:#aa0000;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:0.9rem;line-height:1.4rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#aa0000;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;z-index:100;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;z-index:100;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}
</style>
</head>
<body>
<span id="forkongithub"><a href="https://github.com/foo123/modelview.js">Fork me on GitHub</a></span>
<header id="header">
<h1>ModelView.js Hello Earth! (Simple Mode)</h1>
</header>
<div id="html-snippet" data-snippet="HTML Code" data-snippet-type="htmlmixed" data-snippet-escape="1">
<script id="content" type="text/x-template">
<b>Note:</b> Model Data keys are defined inside { and } template placeholders
<br /><br />
<b>Hello {msg}</b> (updated live on <i>keyup</i>)
<br /><br />
<input type="text" name="model[msg]" size="50" value="" mv-evt mv-on-keyup="update" />
<button class="button" title="{msg.hello}" type="{buttonType}" mv-evt mv-on-click="alert">{hello}</button>
<button class="button" mv-evt mv-on-click="hello_world">Hello World</button>
</script>
<div id="app"></div>
</div>
<script src="../build/modelview.js"></script>
<script id="js-snippet-without-jquery" type="text/javascript" data-snippet="JS Code (standalone)" data-snippet-type="javascript">
(function modelView(ModelView)
{
"use strict";
new ModelView.View('view')
.model(
new ModelView.Model(
'model',
// model data here ..
{msg: 'Earth!'}
)
.getters({
buttonType: function(){
return 'World' === this.$data.msg ? 'button' : false /* remove attribute */;
},
hello: function(){
return 'Hello ' + this.$data.msg;
},
'msg.hello': function(){
return 'Say "Hello ' + this.$data.msg + '"';
}
})
.dependencies({
"buttonType": ["msg"],
"hello": ["msg"]
})
// model data type-casters (if any) here ..
.types({msg: ModelView.Type.Cast.STR})
// model data validators (if any) here ..
.validators({msg: ModelView.Validation.Validate.NOT_EMPTY})
)
.template(document.getElementById('content').innerHTML)
.actions({
// custom view actions (if any) here ..
alert: function(evt, el) {
alert(this.model().get('msg'));
},
hello_world: function(evt, el) {
this.model().set('msg', "World", true);
},
update: function(evt, el) {
this.model().set('msg', el.value, true);
}
})
.shortcuts({
'alt+h': 'alert'
})
.autovalidate(true)
.option('model.events', false)
.autobind(true) // default
.livebind('text')
.bind(['click', 'keyup'], document.getElementById('app'))
.sync()
;
})(ModelView);
</script>
</body>
</html>