-
Notifications
You must be signed in to change notification settings - Fork 1
/
diff.html
156 lines (155 loc) · 27 KB
/
diff.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>diff</title>
<meta name="Generator" content="Vim/7.3">
<meta name="plugin-version" content="vim7.3_v8">
<meta name="settings" content="number_lines,whole_filler,use_css,expand_tabs">
<style type="text/css">
<!--
pre { font-family: monospace; color: #ffffff; background-color: #080808; }
body { font-family: monospace; color: #ffffff; background-color: #080808; }
.lnr { color: #5f5fff; background-color: #080808; }
.Special { color: #ffd7d7; }
.String { color: #ffaf5f; background-color: #262626; }
.Constant { color: #ff40ff; }
.Number { color: #ff5f5f; }
.Type { color: #87ffaf; }
.PreProc { color: #5fd7ff; }
.Statement { color: #ffff00; }
.Identifier { color: #00ffff; font-weight: bold; }
.Comment { color: #00ffff; }
.DiffAdd { color: #ffffff; background-color: #005f00; }
.DiffDelete { color: #ffffff; background-color: #5f0000; }
-->
<!--
table { table-layout: fixed; }
html, body, table, tbody { width: 100%; margin: 0; padding: 0; }
th, td { width: 50.0%; }
td div { overflow: auto; }
-->
</style>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>template_example/inline.html</th>
<th>template_example/not_inline.html</th>
</tr><tr>
<td valign="top"><div>
<pre>
<span class="lnr"> 1 </span>
<span class="lnr"> 2 </span><span class="Comment"><!DOCTYPE html></span>
<span class="lnr"> 3 </span><span class="Identifier"><</span><span class="Statement">html</span><span class="Identifier">></span>
<span class="lnr"> 4 </span> <span class="Identifier"><</span><span class="Statement">head</span><span class="Identifier">></span>
<span class="lnr"> 5 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">style</span><span class="Identifier">></span>
<span class="lnr"> 6 </span> <span class="Statement">table</span> <span class="Identifier">{</span> <span class="Type">border-collapse</span>:<span class="Type">collapse</span>; <span class="Type">margin</span>:<span class="Number">8px</span>; <span class="Type">background-color</span>:<span class="Constant">#f8f8f8</span>; <span class="Identifier">}</span>
<span class="lnr"> 7 </span> <span class="Statement">table</span> <span class="Statement">td</span> <span class="Identifier">{</span> <span class="Type">height</span>:<span class="Number">30px</span>; <span class="Type">width</span>:<span class="Number">100px</span>; <span class="Type">border</span>:<span class="Number">1px</span> <span class="Type">solid</span> <span class="Constant">blue</span>; <span class="Type">padding</span>:<span class="Number">3px</span>; <span class="Identifier">}</span>
<span class="lnr"> 8 </span> <span class="Identifier"></</span><span class="Statement">style</span><span class="Identifier">></span>
<span class="lnr"> 9 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier"> </span><span class="Type">src</span><span class="Identifier">=</span><span class="String">"<a href="http://code.jquery.com/jquery-latest.min.js">http://code.jquery.com/jquery-latest.min.js</a>"</span><span class="Identifier">></span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">10 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier"> </span><span class="Type">src</span><span class="Identifier">=</span><span class="String">"<a href="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js</a>"</span><span class="Identifier">></span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">11 </span>
<span class="lnr">12 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">13 </span><span class="Special"> </span><span class="Identifier">var</span><span class="Special"> movies = </span><span class="Identifier">[</span>
<span class="lnr">14 </span><span class="Special"> </span><span class="Identifier">{</span><span class="Special"> Name: </span><span class="String">"The Red Violin"</span><span class="Special">, ReleaseYear: </span><span class="String">"1998"</span><span class="Special">, Director: </span><span class="String">"Françs Girard"</span><span class="Special"> </span><span class="Identifier">}</span><span class="Special">,</span>
<span class="lnr">15 </span><span class="Special"> </span><span class="Identifier">{</span><span class="Special"> Name: </span><span class="String">"Eyes Wide Shut"</span><span class="Special">, ReleaseYear: </span><span class="String">"1999"</span><span class="Special">, Director: </span><span class="String">"Stanley Kubrick"</span><span class="Special"> </span><span class="Identifier">}</span><span class="Special">,</span>
<span class="lnr">16 </span><span class="Special"> </span><span class="Identifier">{</span><span class="Special"> Name: </span><span class="String">"The Inheritance"</span><span class="Special">, ReleaseYear: </span><span class="String">"1976"</span><span class="Special">, Director: </span><span class="String">"Mauro Bolognini"</span><span class="Special"> </span><span class="Identifier">}</span>
<span class="lnr">17 </span><span class="Special"> </span><span class="Identifier">]</span><span class="Special">;</span>
<span class="lnr">18 </span><span class="Special"> </span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">19 </span>
<span class="DiffDelete">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
<span class="DiffDelete">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
<span class="lnr">20 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier"> </span><span class="Type">id</span><span class="Identifier">=</span><span class="String">"summaryTemplate"</span><span class="Identifier"> </span><span class="Type">type</span><span class="Identifier">=</span><span class="String">"text/x-jquery-tmpl"</span><span class="Identifier">></span>
<span class="lnr">21 </span><span class="Special"> <tr> <td>$</span><span class="Identifier">{</span><span class="Special">Name</span><span class="Identifier">}</span><span class="Special"></td> <td>$</span><span class="Identifier">{</span><span class="Special">ReleaseYear</span><span class="Identifier">}</span><span class="Special"></td> <td>$</span><span class="Identifier">{</span><span class="Special">Director</span><span class="Identifier">}</span><span class="Special"></td> </tr></span>
<span class="lnr">22 </span><span class="Special"> </span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="DiffDelete">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
<span class="DiffDelete">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
<span class="DiffDelete">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
<span class="DiffDelete">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
<span class="DiffDelete">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
<span class="lnr">23 </span>
<span class="lnr">24 </span>
<span class="lnr">25 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">26 </span><span class="Special"> </span><span class="Identifier">function</span><span class="Special"> renderList</span>()<span class="Special"> </span><span class="Identifier">{</span>
<span class="lnr">27 </span><span class="Special"> $</span>(<span class="Special"> </span><span class="String">"#summaryTemplate"</span><span class="Special"> </span>)<span class="Special">.tmpl</span>(<span class="Special"> movies </span>)<span class="Special">.appendTo</span>(<span class="Special"> </span><span class="String">"#moviesList"</span><span class="Special"> </span>)<span class="Special">;</span>
<span class="lnr">28 </span><span class="Special"> </span><span class="Identifier">}</span>
<span class="lnr">29 </span><span class="Special"> </span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">30 </span>
<span class="lnr">31 </span>
<span class="lnr">32 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">33 </span><span class="Special"> $</span>(<span class="Identifier">function</span>()<span class="Identifier">{</span>
<span class="lnr">34 </span><span class="Special"> $</span>(<span class="String">'#showBtn'</span>)<span class="Special">.click</span>(<span class="Identifier">function</span>(<span class="Special">data</span>)<span class="Identifier">{</span>
<span class="lnr">35 </span><span class="Special"> renderList</span>()<span class="Special">;</span>
<span class="lnr">36 </span><span class="Special"> </span><span class="Identifier">}</span>)<span class="Special">;</span>
<span class="lnr">37 </span><span class="Special"> </span><span class="Identifier">}</span>)<span class="Special">;</span>
<span class="lnr">38 </span><span class="Special"> </span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">39 </span>
<span class="lnr">40 </span><span class="PreProc"> </span><span class="Identifier"></</span><span class="Statement">head</span><span class="Identifier">></span>
<span class="lnr">41 </span> <span class="Identifier"><</span><span class="Statement">body</span><span class="Identifier">></span>
<span class="lnr">42 </span> <span class="Identifier"><</span><span class="Statement">button</span><span class="Identifier"> </span><span class="Type">id</span><span class="Identifier">=</span><span class="String">"showBtn"</span><span class="Identifier">></span>Show movies<span class="Identifier"></</span><span class="Statement">button</span><span class="Identifier">></span><span class="Identifier"><</span><span class="Statement">br</span><span class="Identifier">/></span>
<span class="lnr">43 </span> <span class="Identifier"><</span><span class="Statement">table</span><span class="Identifier">><</span><span class="Statement">tbody</span><span class="Identifier"> </span><span class="Type">id</span><span class="Identifier">=</span><span class="String">"moviesList"</span><span class="Identifier">></span><span class="Identifier"></</span><span class="Statement">tbody</span><span class="Identifier">></</span><span class="Statement">table</span><span class="Identifier">></span>
<span class="lnr">44 </span> <span class="Identifier"></</span><span class="Statement">body</span><span class="Identifier">></span>
<span class="lnr">45 </span><span class="Identifier"></</span><span class="Statement">html</span><span class="Identifier">></span>
</pre>
</div></td>
<td valign="top"><div>
<pre>
<span class="lnr"> 1 </span>
<span class="lnr"> 2 </span><span class="Comment"><!DOCTYPE html></span>
<span class="lnr"> 3 </span><span class="Identifier"><</span><span class="Statement">html</span><span class="Identifier">></span>
<span class="lnr"> 4 </span> <span class="Identifier"><</span><span class="Statement">head</span><span class="Identifier">></span>
<span class="lnr"> 5 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">style</span><span class="Identifier">></span>
<span class="lnr"> 6 </span> <span class="Statement">table</span> <span class="Identifier">{</span> <span class="Type">border-collapse</span>:<span class="Type">collapse</span>; <span class="Type">margin</span>:<span class="Number">8px</span>; <span class="Type">background-color</span>:<span class="Constant">#f8f8f8</span>; <span class="Identifier">}</span>
<span class="lnr"> 7 </span> <span class="Statement">table</span> <span class="Statement">td</span> <span class="Identifier">{</span> <span class="Type">height</span>:<span class="Number">30px</span>; <span class="Type">width</span>:<span class="Number">100px</span>; <span class="Type">border</span>:<span class="Number">1px</span> <span class="Type">solid</span> <span class="Constant">blue</span>; <span class="Type">padding</span>:<span class="Number">3px</span>; <span class="Identifier">}</span>
<span class="lnr"> 8 </span> <span class="Identifier"></</span><span class="Statement">style</span><span class="Identifier">></span>
<span class="lnr"> 9 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier"> </span><span class="Type">src</span><span class="Identifier">=</span><span class="String">"<a href="http://code.jquery.com/jquery-latest.min.js">http://code.jquery.com/jquery-latest.min.js</a>"</span><span class="Identifier">></span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">10 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier"> </span><span class="Type">src</span><span class="Identifier">=</span><span class="String">"<a href="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js</a>"</span><span class="Identifier">></span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">11 </span>
<span class="lnr">12 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">13 </span><span class="Special"> </span><span class="Identifier">var</span><span class="Special"> movies = </span><span class="Identifier">[</span>
<span class="lnr">14 </span><span class="Special"> </span><span class="Identifier">{</span><span class="Special"> Name: </span><span class="String">"The Red Violin"</span><span class="Special">, ReleaseYear: </span><span class="String">"1998"</span><span class="Special">, Director: </span><span class="String">"Françs Girard"</span><span class="Special"> </span><span class="Identifier">}</span><span class="Special">,</span>
<span class="lnr">15 </span><span class="Special"> </span><span class="Identifier">{</span><span class="Special"> Name: </span><span class="String">"Eyes Wide Shut"</span><span class="Special">, ReleaseYear: </span><span class="String">"1999"</span><span class="Special">, Director: </span><span class="String">"Stanley Kubrick"</span><span class="Special"> </span><span class="Identifier">}</span><span class="Special">,</span>
<span class="lnr">16 </span><span class="Special"> </span><span class="Identifier">{</span><span class="Special"> Name: </span><span class="String">"The Inheritance"</span><span class="Special">, ReleaseYear: </span><span class="String">"1976"</span><span class="Special">, Director: </span><span class="String">"Mauro Bolognini"</span><span class="Special"> </span><span class="Identifier">}</span>
<span class="lnr">17 </span><span class="Special"> </span><span class="Identifier">]</span><span class="Special">;</span>
<span class="lnr">18 </span><span class="Special"> </span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">19 </span>
<span class="lnr">20 </span><span class="DiffAdd"> </span><span class="DiffAdd"> </span>
<span class="lnr">21 </span><span class="PreProc DiffAdd"> </span><span class="Comment DiffAdd"><!</span><span class="Comment DiffAdd">--</span><span class="DiffAdd"> </span>
<span class="lnr">22 </span><span class="Comment"> <script id="summaryTemplate" type="text/x-jquery-tmpl"></span>
<span class="lnr">23 </span><span class="Comment"> <tr> <td>${Name}</td> <td>${ReleaseYear}</td> <td>${Director}</td> </tr></span>
<span class="lnr">24 </span><span class="Comment"> </script></span>
<span class="lnr">25 </span><span class="Comment DiffAdd"> --</span><span class="Comment DiffAdd">></span><span class="DiffAdd"> </span>
<span class="lnr">26 </span><span class="PreProc DiffAdd"> </span><span class="Comment DiffAdd"><!</span><span class="Comment DiffAdd">-- how do I make this work??? --</span><span class="Comment DiffAdd">></span><span class="DiffAdd"> </span>
<span class="lnr">27 </span><span class="PreProc DiffAdd"> </span><span class="Identifier DiffAdd"><</span><span class="Statement DiffAdd">script</span><span class="Identifier DiffAdd"> </span><span class="Type DiffAdd">id</span><span class="Identifier DiffAdd">=</span><span class="String DiffAdd">"summaryTemplate"</span><span class="Identifier DiffAdd"> </span><span class="Type DiffAdd">src</span><span class="Identifier DiffAdd">=</span><span class="String DiffAdd">"template.html"</span><span class="Identifier DiffAdd"> </span><span class="Type DiffAdd">type</span><span class="Identifier DiffAdd">=</span><span class="String DiffAdd">"text/x-jquery-tmpl"</span><span class="Identifier DiffAdd">></span><span class="Identifier DiffAdd"></</span><span class="Statement DiffAdd">script</span><span class="Identifier DiffAdd">></span><span class="DiffAdd"> </span>
<span class="lnr">28 </span><span class="DiffAdd"> </span><span class="DiffAdd"> </span>
<span class="lnr">29 </span><span class="DiffAdd"> </span><span class="DiffAdd"> </span>
<span class="lnr">30 </span>
<span class="lnr">31 </span>
<span class="lnr">32 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">33 </span><span class="Special"> </span><span class="Identifier">function</span><span class="Special"> renderList</span>()<span class="Special"> </span><span class="Identifier">{</span>
<span class="lnr">34 </span><span class="Special"> $</span>(<span class="Special"> </span><span class="String">"#summaryTemplate"</span><span class="Special"> </span>)<span class="Special">.tmpl</span>(<span class="Special"> movies </span>)<span class="Special">.appendTo</span>(<span class="Special"> </span><span class="String">"#moviesList"</span><span class="Special"> </span>)<span class="Special">;</span>
<span class="lnr">35 </span><span class="Special"> </span><span class="Identifier">}</span>
<span class="lnr">36 </span><span class="Special"> </span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">37 </span>
<span class="lnr">38 </span>
<span class="lnr">39 </span><span class="PreProc"> </span><span class="Identifier"><</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">40 </span><span class="Special"> $</span>(<span class="Identifier">function</span>()<span class="Identifier">{</span>
<span class="lnr">41 </span><span class="Special"> $</span>(<span class="String">'#showBtn'</span>)<span class="Special">.click</span>(<span class="Identifier">function</span>(<span class="Special">data</span>)<span class="Identifier">{</span>
<span class="lnr">42 </span><span class="Special"> renderList</span>()<span class="Special">;</span>
<span class="lnr">43 </span><span class="Special"> </span><span class="Identifier">}</span>)<span class="Special">;</span>
<span class="lnr">44 </span><span class="Special"> </span><span class="Identifier">}</span>)<span class="Special">;</span>
<span class="lnr">45 </span><span class="Special"> </span><span class="Identifier"></</span><span class="Statement">script</span><span class="Identifier">></span>
<span class="lnr">46 </span>
<span class="lnr">47 </span><span class="PreProc"> </span><span class="Identifier"></</span><span class="Statement">head</span><span class="Identifier">></span>
<span class="lnr">48 </span> <span class="Identifier"><</span><span class="Statement">body</span><span class="Identifier">></span>
<span class="lnr">49 </span> <span class="Identifier"><</span><span class="Statement">button</span><span class="Identifier"> </span><span class="Type">id</span><span class="Identifier">=</span><span class="String">"showBtn"</span><span class="Identifier">></span>Show movies<span class="Identifier"></</span><span class="Statement">button</span><span class="Identifier">></span><span class="Identifier"><</span><span class="Statement">br</span><span class="Identifier">/></span>
<span class="lnr">50 </span> <span class="Identifier"><</span><span class="Statement">table</span><span class="Identifier">><</span><span class="Statement">tbody</span><span class="Identifier"> </span><span class="Type">id</span><span class="Identifier">=</span><span class="String">"moviesList"</span><span class="Identifier">></span><span class="Identifier"></</span><span class="Statement">tbody</span><span class="Identifier">></</span><span class="Statement">table</span><span class="Identifier">></span>
<span class="lnr">51 </span> <span class="Identifier"></</span><span class="Statement">body</span><span class="Identifier">></span>
<span class="lnr">52 </span><span class="Identifier"></</span><span class="Statement">html</span><span class="Identifier">></span>
</pre>
</div></td>
</tr>
</table>
</body>
</html>