Skip to content

Commit a0dc2da

Browse files
PaulZiebert672PaulZiebert672
committed
breaking changes in termplates
1 parent 31e4af1 commit a0dc2da

File tree

15 files changed

+740
-127
lines changed

15 files changed

+740
-127
lines changed

‎euler-ode/assets/jstoy/events-demo-02.js

Lines changed: 123 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -3,109 +3,109 @@ print(heredoc(function () {/*
33
44
<style>
55
.container h2 {
6-
font-family: arial, sans-serif;
7-
color: red;
8-
padding-left: 18pt;
6+
font-family: arial, sans-serif;
7+
color: red;
8+
padding-left: 18pt;
99
}
1010
.container div#ode-info {
11-
padding: 2pt 36pt;
12-
margin: 3pt 6pt;
13-
width: 54%;
14-
background-color: beige;
15-
color: gray;
11+
padding: 2pt 36pt;
12+
margin: 3pt 6pt;
13+
width: 54%;
14+
background-color: beige;
15+
color: gray;
1616
}
1717
.container .vlabel label {
18-
font-family: arial,
19-
sans-serif; text-align: right;
20-
color: steelblue;
21-
padding: 2pt 8pt;
18+
font-family: arial,
19+
sans-serif; text-align: right;
20+
color: steelblue;
21+
padding: 2pt 8pt;
2222
}
2323
.container .vfield input {
24-
font-family: courier, fixed;
25-
text-align: right;
26-
color: teal;
24+
font-family: courier, fixed;
25+
text-align: right;
26+
color: teal;
2727
}
2828
.container .vbutton input {
29-
padding: 2pt 24pt;
29+
padding: 2pt 24pt;
3030
}
3131
.container #table-out {
32-
margin: 6pt 6pt;
33-
width: 60%;
32+
margin: 6pt 6pt;
33+
width: 60%;
3434
}
3535
.container #table-out thead {
36-
display: table;
37-
width: 100%;
38-
table-layout: fixed;
39-
color: steelblue;
40-
background-color: #d2dddd;
36+
display: table;
37+
width: 100%;
38+
table-layout: fixed;
39+
color: steelblue;
40+
background-color: #d2dddd;
4141
}
4242
.container #table-body { display: block; max-heigth: 30em; overflow-y: auto; }
4343
.container #table-out tr.vpoint-data {
44-
display: table;
45-
width: 100%;
46-
table-layout: fixed;
47-
text-align: left;
48-
font-family: monospace;
49-
font-size: 14px;
50-
color: steelblue;
51-
border-bottom-width: thin;
52-
border-bottom-style: solid;
53-
border-bottom-color: #d2dddd;
44+
display: table;
45+
width: 100%;
46+
table-layout: fixed;
47+
text-align: left;
48+
font-family: monospace;
49+
font-size: 14px;
50+
color: steelblue;
51+
border-bottom-width: thin;
52+
border-bottom-style: solid;
53+
border-bottom-color: #d2dddd;
5454
}
5555
</style>
5656
5757
<div id="ode-data" class="container">
58-
<hr>
59-
<h2>Numerical integration</h2>
60-
<form id="form-init" autocomplete="off" method="post" action="">
61-
</form>
62-
<div id="ode-table">
63-
<table id="table-out"></table>
64-
</div>
65-
<div id="ode-info">
66-
</div>
67-
<hr>
58+
<hr>
59+
<h2>Numerical integration</h2>
60+
<form id="form-init" autocomplete="off" method="post" action="">
61+
</form>
62+
<div id="ode-table">
63+
<table id="table-out"></table>
64+
</div>
65+
<div id="ode-info">
66+
</div>
67+
<hr>
6868
</div>
6969
<div id="ode-templates" class="template">
70-
<script type="text/template" id="form-init-template">
71-
<div>
72-
<span class="vlabel">
73-
<label for="coordinate">(q, p) @ t0:</label>
74-
</span>
75-
<span class="vfield">
76-
<input name="coordinate" value="<%= coordinate %>" size="24" type="text">
77-
<input name="momentum" value="<%= momentum %>" size="24" type="text">
78-
</span>
79-
<span class="vbutton">
80-
<input name="submit" value="submit" type="submit">
81-
</span>
82-
</div>
83-
</script>
84-
<script type="text/template" id="table-out-template">
85-
<thead>
86-
<tr>
87-
<th>q</th>
88-
<th>p</th>
89-
</tr>
90-
</thead>
91-
<tbody id="table-body"></tbody>
92-
</script>
93-
<script type="text/template" id="table-body-template">
94-
<tr class="vpoint-data">
95-
<td><%= coordinate %></td>
96-
<td><%= momentum %></td>
97-
</tr>
98-
</script>
99-
<script type="text/template" id="ode-info-template">
100-
<%= count %> record(s)
101-
</script>
70+
<script type="text/template" id="form-init-template">
71+
<div>
72+
<span class="vlabel">
73+
<label for="coordinate">(q, p) @ t0:</label>
74+
</span>
75+
<span class="vfield">
76+
<input name="coordinate" value="<%= coordinate %>" size="24" type="text">
77+
<input name="momentum" value="<%= momentum %>" size="24" type="text">
78+
</span>
79+
<span class="vbutton">
80+
<input name="submit" value="submit" type="submit">
81+
</span>
82+
</div>
83+
</script>
84+
<script type="text/template" id="table-out-template">
85+
<thead>
86+
<tr class="vpoint-header">
87+
<th>q</th>
88+
<th>p</th>
89+
</tr>
90+
</thead>
91+
<tbody id="table-body"></tbody>
92+
</script>
93+
<script type="text/template" id="table-body-template">
94+
<tr class="vpoint-data">
95+
<td><%= coordinate %></td>
96+
<td><%= momentum %></td>
97+
</tr>
98+
</script>
99+
<script type="text/template" id="ode-info-template">
100+
<%= count %> record(s)
101+
</script>
102102
</div>
103103
104104
*/}));
105105

106106
load([
107-
'/euler-ode/ui/utility.js',
108-
'/euler-ode/ui/framework.js'
107+
'/euler-ode/ui/utility.js',
108+
'/euler-ode/ui/framework.js'
109109
], function () {
110110

111111
var _util = VoidCode.Util;
@@ -117,91 +117,90 @@ var Controller = VoidCode.Controller;
117117
// Models
118118

119119
var formModel = new Model({
120-
coordinate: 0,
121-
momentum: 1
120+
coordinate: 0,
121+
momentum: 1
122122
});
123123

124124
var infoModel = new Model({
125-
count: 0
125+
count: 0
126126
});
127127

128128
var tbModel = new Model;
129129

130130
// Views
131131

132132
var formView = new View({
133-
el: '#form-init',
134-
template: _util.template($qsa('#form-init-template')[0].innerHTML),
135-
render: function (data) {
136-
$qsa(this.el)[0].innerHTML = this.template(data);
137-
}
133+
el: '#form-init',
134+
template: _util.template($qsa('#form-init-template')[0].innerHTML),
135+
render: function (data) {
136+
$qsa(this.el)[0].innerHTML = this.template(data);
137+
}
138138
});
139139

140140
var infoView = new View({
141-
el: '#ode-info',
142-
template: _util.template($qsa('#ode-info-template')[0].innerHTML),
143-
render: function (data) {
144-
$qsa(this.el)[0].innerHTML = this.template(data);
145-
},
146-
reset: function () { $qsa(this.el)[0].innerHTML = ''; },
141+
el: '#ode-info',
142+
template: _util.template($qsa('#ode-info-template')[0].innerHTML),
143+
render: function (data) {
144+
$qsa(this.el)[0].innerHTML = this.template(data);
145+
},
146+
reset: function () { $qsa(this.el)[0].innerHTML = ''; },
147147
});
148148

149149
var tbView = new View({
150-
elementTable: '#table-out',
151-
elementBody: '#table-body',
152-
templateTable: _util.template($qsa('#table-out-template')[0].innerHTML),
153-
templateBody: _util.template($qsa('#table-body-template')[0].innerHTML),
154-
render: function (data) {
155-
$qsa(this.elementTable)[0].innerHTML = this.templateTable(data);
156-
},
157-
addElement: function (data) {
158-
var $tbody = $qsa(this.elementBody)[0];
159-
$tbody.innerHTML += this.templateBody(data);
160-
$tbody.scrollTo && $tbody.scrollTo(0, $tbody.scrollHeight - $tbody.clientHeight);
161-
},
162-
reset: function () { $qsa(this.elementTable)[0].innerHTML = ''; },
150+
elementTable: '#table-out',
151+
elementBody: '#table-body',
152+
templateTable: _util.template($qsa('#table-out-template')[0].innerHTML),
153+
templateBody: _util.template($qsa('#table-body-template')[0].innerHTML),
154+
render: function (data) {
155+
$qsa(this.elementTable)[0].innerHTML = this.templateTable(data);
156+
},
157+
addElement: function (data) {
158+
var $tbody = $qsa(this.elementBody)[0];
159+
$tbody.innerHTML += this.templateBody(data);
160+
$tbody.scrollTo && $tbody.scrollTo(0, $tbody.scrollHeight - $tbody.clientHeight);
161+
},
162+
reset: function () { $qsa(this.elementTable)[0].innerHTML = ''; },
163163
});
164164

165165
// Controllers
166166

167167
var formController = new Controller({
168-
model: formModel,
169-
view: formView,
170-
events: {
171-
'#form-init/submit': 'onSubmit',
172-
// '#form-init input[type="text"]/change': 'onTextChanged',
173-
// '#form-init input[type="checkbox"]/change': 'onCheckboxChanged',
174-
},
175-
onSubmit: function (event) {
176-
event.preventDefault();
177-
evolution();
178-
}
179-
168+
model: formModel,
169+
view: formView,
170+
events: {
171+
'#form-init/submit': 'onSubmit',
172+
// '#form-init input[type="text"]/change': 'onTextChanged',
173+
// '#form-init input[type="checkbox"]/change': 'onCheckboxChanged',
174+
},
175+
onSubmit: function (event) {
176+
event.preventDefault();
177+
evolution();
178+
}
180179
});
181180
formController.init();
182181

183182
var infoController = new Controller({
184-
model: infoModel,
185-
view: infoView,
186-
events: {}
183+
model: infoModel,
184+
view: infoView,
185+
events: {}
187186
});
188187
infoController.model.on('chunk/complete', function () {
189188
print('<--', 'got it');
190189
// log(this);
191190
var count = this.get('count');
192191
this.set({ count: ++count });
193-
});
192+
});
194193
infoController.init();
195194

196195
var tbController = new Controller({
197-
model: tbModel,
198-
view: tbView,
199-
events: {}
196+
model: tbModel,
197+
view: tbView,
198+
events: {}
200199
});
201200
tbController.model.on('chunk/complete', function (data) {
202201
print('<~~', 'got it:');
203202
this.trigger(this.id + '/append', data);
204-
});
203+
});
205204
tbController.view.on(
206205
tbController.model.id + '/append',
207206
tbController.view.addElement

0 commit comments

Comments
 (0)