-
Notifications
You must be signed in to change notification settings - Fork 4
/
hello-world.html
112 lines (107 loc) · 4.84 KB
/
hello-world.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
<!doctype html>
<html lang="en">
<head>
<title>modelview.js • Hello World</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!</h1>
</header>
<div id="html-snippet" data-snippet="HTML Code" data-snippet-type="htmlmixed" data-snippet-escape="1">
<script id="HelloButtonComponent" type="text/x-template">
<button class="button" mv-evt mv-on-click=":hello_world">Hello World ({this.model.getVal('clicks')})</button>
</script>
<script id="InputControlComponent" type="text/x-template">
<span>The local component value "{this.model.getVal('mylocalvar')}" can be updated here: <input type="text" name=":model[mylocalvar]" size="5" value={this.model.getVal('mylocalvar')} /></span>
</script>
<script id="content" type="text/x-template">
<b>Note:</b> Arbitrary JavaScript Expressions can be run inside { and } template placeholders
<br /><br />
<b>Hello {view.model().getVal('msg')}</b> (updated live on <i>keyup</i>)
<br /><br />
<input type="text" name="model[msg]" size="50" value={view.model().getVal('msg')} mv-evt mv-on-keyup="update" />
<button class="button" title={view.model().getVal('msg')} mv-evt mv-on-click="alert">Hello</button>
<HelloButton/>
<br />
<InputControl/>
</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!'}
)
// 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)
.components({
HelloButton: ModelView.View.Component(
'HelloButton',
document.getElementById('HelloButtonComponent').innerHTML,
{
model: () => ({clicks:0}),
actions: {
hello_world: function(evt, el) {
this.model.set('clicks', this.model.get('clicks')+1, true);
this.view.model().set('msg', 'World', true);
}
},
changed: (oldData, newData) => false,
attached: (comp) => {console.log('HelloButton attached to DOM <'+comp.dom.tagName+'>')},
updated: (comp) => {console.log('HelloButton updated with '+comp.model.get('clicks')+' clicks')},
detached: (comp) => {console.log('HelloButton detached from DOM <'+comp.dom.tagName+'>')}
}
),
InputControl: ModelView.View.Component(
'InputControl',
document.getElementById('InputControlComponent').innerHTML,
{
model: () => ({mylocalvar:0}),
changed: (oldData, newData) => false
}
)
})
.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)
.autobind(true) // default
.livebind(true) // default
.bind(['click', 'change', 'keyup'], document.getElementById('app'))
.sync()
;
})(ModelView);
</script>
</body>
</html>