-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathcollection.html
More file actions
122 lines (117 loc) · 5.48 KB
/
Copy pathcollection.html
File metadata and controls
122 lines (117 loc) · 5.48 KB
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
<!doctype html>
<html lang="en">
<head>
<title>modelview.js • Collection Test</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 Collection Test</h1>
</header>
<script id="Tag" type="text/x-template">
<i>{data}</i>
</script>
<script id="Item" type="text/x-template">
<li>{data.label} {data.tags.mapTo(tag => (<Tag data={tag}/>,), 2)}</li>
</script>
<script id="ItemIndex" type="text/x-template">
<li>#{data.index} {data.item.label} {data.item.tags.mapTo(tag => (<Tag data={tag}/>,), 2)}</li>
</script>
<!--
-->
<script id="content" type="text/x-template">
<button mv-evt mv-on-click="reset">Reset</button>
<button mv-evt mv-on-click="append_item">Append Items</button>
<button mv-evt mv-on-click="splice_items">Splice Item 1</button>
<button mv-evt mv-on-click="append_tag_item1">Append Tag Item 1</button>
<button mv-evt mv-on-click="splice_tags_item1">Splice Tags Item 1</button>
<button mv-evt mv-on-click="reverse">Reverse</button>
<button mv-evt mv-on-click="reorder">Reorder</button>
<button mv-evt mv-on-click="empty">Empty</button>
<button mv-evt mv-on-click="notchanged">Not Changed</button>
<ul>
{this.model().get('items').mapTo((item, index) => (<ItemIndex data={{index:index,item:item}}/>))}
<li id="notchanged">not changed</li>
{this.model().get('items').clone().mapTo(item => (<Item data={{label:item.label,tags:item.tags.clone()}}/>))}
</ul>
</script>
<div id="app"></div>
<script src="../build/modelview.js"></script>
<script type="text/javascript">
(function modelView(ModelView)
{
"use strict";
new ModelView.View('view')
.model(
new ModelView.Model(
'model',
// model data here ..
{
items: new ModelView.Model.Collection([])
}
)
)
.template(document.getElementById('content').innerHTML)
.components({
'Tag': new ModelView.View.Component('Tag', document.getElementById('Tag').innerHTML, {changed: (o, n) => true}),
'Item': new ModelView.View.Component('Item', document.getElementById('Item').innerHTML, {changed: (o, n) => o !== n || 0 < n.tags.diff.length}),
'ItemIndex': new ModelView.View.Component('ItemIndex', document.getElementById('ItemIndex').innerHTML, {changed: (o, n) => o.item !== n.item || o.index !== n.index || 0 < n.item.tags.diff.length})
})
.actions({
reset: function() {
this.model().set('items', [
{label: 'item1', tags: new ModelView.Model.Collection(['tag1', 'tag2'])},
{label: 'item2', tags: new ModelView.Model.Collection(['tag3', 'tag2'])},
{label: 'item3', tags: new ModelView.Model.Collection(['tag4', 'tag5'])},
{label: 'item4', tags: new ModelView.Model.Collection(['tag6', 'tag1'])}
], true);
},
append_item: function() {
this.model().add('items', {label: 'item6', tags: new ModelView.Model.Collection(['tag7', 'tag8', 'tag9'])}, false, true);
},
append_tag_item1: function() {
this.model().add('items.1.tags', 'tag9', false, true);
},
splice_tags_item1: function() {
this.model().del('items.1.tags.1', true);
},
splice_items: function() {
this.model().del('items.1', true);
},
reverse: function() {
this.model().data().items.sort(function(a,b){return a.label<b.label ? 1 : (a.label>b.label ? -1 : 0);});
this.model().notify('items');
},
reorder: function() {
this.model().set('items', [
{label: 'item2', tags: new ModelView.Model.Collection(['tag3', 'tag2'])},
{label: 'item1', tags: new ModelView.Model.Collection(['tag1', 'tag2'])},
{label: 'item4', tags: new ModelView.Model.Collection(['tag6', 'tag1'])},
{label: 'item3', tags: new ModelView.Model.Collection(['tag4', 'tag5'])}
], true);
},
empty: function() {
this.model().set('items', [], true);
},
notchanged: function() {
alert(document.getElementById('notchanged').notchanged);
}
})
.autovalidate(false)
.autobind(false) // default
.livebind(true) // default
.bind(['click'], document.getElementById('app'))
.sync()
;
document.getElementById('notchanged').notchanged = true;
})(ModelView);
</script>
</body>
</html>