forked from tilemill-project/tilemill
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.html
127 lines (124 loc) · 34.5 KB
/
app.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
<!DOCTYPE html> <html> <head> <title>app.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="app.html"> app.js </a> <a class="source" href="export.html"> export.js </a> <a class="source" href="library.html"> library.js </a> <a class="source" href="parsemss.html"> parsemss.js </a> <a class="source" href="project-layer.html"> project-layer.js </a> <a class="source" href="project-map.html"> project-map.js </a> <a class="source" href="project-reference.html"> project-reference.js </a> <a class="source" href="project-stylesheet.html"> project-stylesheet.js </a> <a class="source" href="project-tools.html"> project-tools.js </a> <a class="source" href="project.html"> project.js </a> <a class="source" href="utils.html"> utils.js </a> <a class="source" href="api.html"> api.js </a> <a class="source" href="backbone-dirty.html"> backbone-dirty.js </a> <a class="source" href="bootstrap.html"> bootstrap.js </a> <a class="source" href="export-worker.html"> export-worker.js </a> <a class="source" href="export.html"> export.js </a> <a class="source" href="library-directory.html"> library-directory.js </a> <a class="source" href="library-s3.html"> library-s3.js </a> <a class="source" href="models-server.html"> models-server.js </a> <a class="source" href="tiles.html"> tiles.js </a> <a class="source" href="models.html"> models.js </a> <a class="source" href="tilemill.html"> tilemill.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> app.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <p>Controller. Router rules for TileMill client. Covers the major possible
application states.</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">Router</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Controller</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">routes</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">''</span><span class="o">:</span> <span class="s1">'library'</span><span class="p">,</span>
<span class="s1">'library/:id'</span><span class="o">:</span> <span class="s1">'library'</span><span class="p">,</span>
<span class="s1">'project/:id'</span><span class="o">:</span> <span class="s1">'project'</span><span class="p">,</span>
<span class="s1">'project/:id/export'</span><span class="o">:</span> <span class="s1">'projectExport'</span><span class="p">,</span>
<span class="s1">'project/:id/export/:format'</span><span class="o">:</span> <span class="s1">'projectExportFormat'</span>
<span class="p">},</span>
<span class="nx">library</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="p">(</span><span class="k">new</span> <span class="nx">LibraryList</span><span class="p">()).</span><span class="nx">fetch</span><span class="p">({</span>
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">collection</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">LibraryListView</span><span class="p">({</span>
<span class="nx">collection</span><span class="o">:</span> <span class="nx">collection</span><span class="p">,</span>
<span class="nx">active</span><span class="o">:</span> <span class="nx">id</span>
<span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">page</span><span class="p">(</span><span class="nx">view</span><span class="p">);</span>
<span class="nx">next</span> <span class="o">&&</span> <span class="nx">next</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">error</span><span class="o">:</span> <span class="nx">that</span><span class="p">.</span><span class="nx">error</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">project</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="p">(</span><span class="k">new</span> <span class="nx">Project</span><span class="p">({</span> <span class="nx">id</span><span class="o">:</span> <span class="nx">id</span> <span class="p">})).</span><span class="nx">fetch</span><span class="p">({</span>
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ProjectView</span><span class="p">({</span> <span class="nx">model</span><span class="o">:</span> <span class="nx">model</span> <span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">page</span><span class="p">(</span><span class="nx">view</span><span class="p">);</span>
<span class="nx">next</span> <span class="o">&&</span> <span class="nx">next</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">error</span><span class="o">:</span> <span class="nx">that</span><span class="p">.</span><span class="nx">error</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">projectExport</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">pageView</span><span class="p">.</span><span class="nx">views</span><span class="p">.</span><span class="nx">exportDropdown</span><span class="p">.</span><span class="nx">jobs</span><span class="p">();</span>
<span class="nx">next</span> <span class="o">&&</span> <span class="nx">next</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">projectExportFormat</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">format</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">pageView</span><span class="p">.</span><span class="nx">views</span><span class="p">.</span><span class="nx">exportDropdown</span><span class="p">.</span><span class="nx">xport</span><span class="p">(</span><span class="nx">format</span><span class="p">);</span>
<span class="nx">next</span> <span class="o">&&</span> <span class="nx">next</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">error</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ErrorView</span><span class="p">({</span> <span class="nx">message</span><span class="o">:</span> <span class="s1">'Page not found'</span> <span class="p">});</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">page</span><span class="p">(</span><span class="nx">view</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>App</h2>
<p>View. Represents the entire application "viewport". Available in the global
namespace as <code>window.app</code> and contains various utility methods.</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">settings</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">controller</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Router</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">abilities</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">abilities</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">reference</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">reference</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Catchall error page requires a regex so we must add its route manually.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">controller</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="sr">/^(.*?)/</span><span class="p">,</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">Router</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Watch status of server and show message if the server is down.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">status</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Status</span><span class="p">(</span><span class="s1">'api'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">status</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">message</span><span class="p">(</span><span class="s1">'Server down'</span><span class="p">,</span> <span class="s1">'The TileMill server could not be reached.'</span><span class="p">,</span> <span class="s1">'error'</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">5000</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Bootstrap:</p>
<ol>
<li>Fetch settings, abilities, reference models from server.</li>
<li>Begin routing.</li>
</ol> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">abilities</span><span class="p">.</span><span class="nx">fetch</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">reference</span><span class="p">.</span><span class="nx">fetch</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fetch</span><span class="p">({</span>
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> <span class="p">},</span>
<span class="nx">error</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span> <span class="p">}</span>
<span class="p">});</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Return the base URL of TileMill including a single trailing slash,
e.g. <code>http://localhost:8889/</code> or <code>http://mapbox/tilemill/</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">baseURL</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">baseURL</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">protocol</span> <span class="o">+</span> <span class="s1">'//'</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">host</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">args</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'/'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Path already ends with trailing slash.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">[</span><span class="nx">args</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]</span> <span class="o">===</span> <span class="s1">''</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'/'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p><code>index.html</code> or similar trailing filename.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">args</span><span class="p">[</span><span class="nx">args</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">],</span> <span class="s1">'.'</span><span class="p">)</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'/'</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'/'</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Path beyond domain.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'/'</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'/'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>URL-safe base64 encode a string. Optionally add a datestamp based
querystring.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">safe64</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">signed</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">signed</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">signed</span> <span class="o">=</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">signed</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">url</span> <span class="o">+=</span> <span class="s1">'?'</span> <span class="o">+</span> <span class="p">(</span><span class="s1">''</span> <span class="o">+</span> <span class="p">(</span><span class="o">+</span><span class="k">new</span> <span class="nb">Date</span><span class="p">)).</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">10</span><span class="p">));</span>
<span class="k">return</span> <span class="nx">Base64</span><span class="p">.</span><span class="nb">encodeURI</span><span class="p">(</span><span class="nx">url</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Set the application page viweport to the provided view. Triggers a
<code>ready</code> event for any behaviors that expect DOM elements to be present
in the document before attaching/initing (e.g. CodeMirror, OpenLayers).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">page</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.tipsy'</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">pageView</span> <span class="o">=</span> <span class="nx">view</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Display a loading overlay over the page viewport.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">loading</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">loadingView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">LoadingView</span><span class="p">({</span><span class="nx">message</span><span class="o">:</span> <span class="nx">message</span><span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">loadingView</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Remove a loading overlay from the page viewport.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">done</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">loadingView</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadingView</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Display a popup message.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">message</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">type</span> <span class="o">=</span> <span class="nx">type</span> <span class="o">||</span> <span class="s1">'status'</span><span class="p">;</span>
<span class="nx">message</span><span class="p">.</span><span class="nx">responseText</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">message</span> <span class="o">=</span> <span class="nx">message</span><span class="p">.</span><span class="nx">responseText</span><span class="p">);</span>
<span class="k">new</span> <span class="nx">PopupView</span><span class="p">({</span>
<span class="nx">title</span><span class="o">:</span> <span class="nx">title</span><span class="p">,</span>
<span class="nx">content</span><span class="o">:</span> <span class="nx">ich</span><span class="p">.</span><span class="nx">PopupMessage</span><span class="p">({</span>
<span class="nx">message</span><span class="o">:</span> <span class="nx">message</span><span class="p">,</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">type</span>
<span class="p">},</span> <span class="kc">true</span><span class="p">)</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Application bootstrap.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Fix for <a href="http://stackoverflow.com/questions/1013637/unexpected-caching-of-ajax-results-in-ie8">IE8 AJAX payload caching</a>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">ajaxSetup</span><span class="p">({</span> <span class="nx">cache</span><span class="o">:</span> <span class="kc">false</span> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Create the app.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">App</span><span class="p">({</span>
<span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#app'</span><span class="p">),</span>
<span class="nx">model</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Settings</span><span class="p">({</span> <span class="nx">id</span><span class="o">:</span> <span class="s1">'settings'</span> <span class="p">}),</span>
<span class="nx">abilities</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Abilities</span><span class="p">(),</span>
<span class="nx">reference</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Reference</span><span class="p">()</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Use <code>jquery.tipsy</code> for displaying tooltips.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">(</span><span class="s1">'a'</span><span class="p">).</span><span class="nx">tipsy</span><span class="p">({</span>
<span class="nx">live</span><span class="o">:</span><span class="kc">true</span><span class="p">,</span>
<span class="nx">html</span><span class="o">:</span><span class="kc">true</span><span class="p">,</span>
<span class="nx">gravity</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s1">'.tipsy-w'</span><span class="p">))</span> <span class="p">{</span> <span class="k">return</span> <span class="s1">'w'</span><span class="p">;</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s1">'.tipsy-e'</span><span class="p">))</span> <span class="p">{</span> <span class="k">return</span> <span class="s1">'e'</span><span class="p">;</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s1">'.tipsy-n'</span><span class="p">))</span> <span class="p">{</span> <span class="k">return</span> <span class="s1">'n'</span><span class="p">;</span> <span class="p">}</span>
<span class="k">return</span> <span class="s1">'s'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">});</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>