[build][s]: add latest build version of recline plus latest built docs.
This commit is contained in:
Rufus Pollock
parent
4074f380d8
commit
7837105494
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html> <html> <head> <title>backend.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.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> <h1>Recline Backends</h1>
|
||||
<!DOCTYPE html> <html> <head> <title>backend.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.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> <h1>Recline Backends</h1>
|
||||
|
||||
<p>Backends are connectors to backend data sources and stores</p>
|
||||
|
||||
@ -41,7 +41,7 @@ purposes.</p>
|
||||
<p>To use it you should provide in your constructor data:</p>
|
||||
|
||||
<ul>
|
||||
<li>metadata (including headers array)</li>
|
||||
<li>metadata (including fields array)</li>
|
||||
<li><p>documents: list of hashes, each hash being one doc. A doc <em>must</em> have an id attribute which is unique.</p>
|
||||
|
||||
<p>Example:</p>
|
||||
@ -52,9 +52,9 @@ var backend = Backend();
|
||||
backend.addDataset({
|
||||
metadata: {
|
||||
id: 'my-id',
|
||||
title: 'My Title',
|
||||
headers: ['x', 'y', 'z'],
|
||||
title: 'My Title'
|
||||
},
|
||||
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}],
|
||||
documents: [
|
||||
{id: 0, x: 1, y: 2, z: 3},
|
||||
{id: 1, x: 2, y: 4, z: 6}
|
||||
@ -79,6 +79,7 @@ etc ...
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">==</span> <span class="s1">'Dataset'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">rawDataset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">datasets</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">];</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">rawDataset</span><span class="p">.</span><span class="nx">metadata</span><span class="p">);</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">rawDataset</span><span class="p">.</span><span class="nx">fields</span><span class="p">);</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="nx">rawDataset</span><span class="p">.</span><span class="nx">documents</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
@ -141,12 +142,12 @@ etc ...
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="nx">wrapInTimeout</span><span class="p">(</span><span class="nx">jqxhr</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">schema</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">headers</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">schema</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span>
|
||||
<span class="nx">headers</span><span class="o">:</span> <span class="nx">headers</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">schema</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">item</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
|
||||
<span class="k">delete</span> <span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">item</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">fieldData</span><span class="p">);</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="nx">schema</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">jqxhr</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
@ -214,9 +215,10 @@ etc ...
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="nx">wrapInTimeout</span><span class="p">(</span><span class="nx">jqxhr</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span>
|
||||
<span class="nx">headers</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">fields</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">};</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">jqxhr</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">arguments</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -276,7 +278,10 @@ var dataset = new recline.Model.Dataset({
|
||||
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'url'</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">result</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">gdocsToJavascript</span><span class="p">(</span><span class="nx">d</span><span class="p">);</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="s1">'headers'</span><span class="o">:</span> <span class="nx">result</span><span class="p">.</span><span class="nx">header</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>cache data onto dataset (we have loaded whole gdoc it seems!)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">model</span><span class="p">.</span><span class="nx">_dataCache</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">field</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="nx">fieldId</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>cache data onto dataset (we have loaded whole gdoc it seems!)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">model</span><span class="p">.</span><span class="nx">_dataCache</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span> <span class="p">}</span>
|
||||
@ -284,7 +289,7 @@ var dataset = new recline.Model.Dataset({
|
||||
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">dataset</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">fields</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'headers'</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>zip the field headers with the data rows to produce js objs
|
||||
<span class="kd">var</span> <span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span> <span class="s1">'id'</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>zip the fields with the data rows to produce js objs
|
||||
TODO: factor this out as a common method with other backends</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">objs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">_dataCache</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">zip</span><span class="p">(</span><span class="nx">fields</span><span class="p">,</span> <span class="nx">d</span><span class="p">),</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">x</span><span class="p">[</span><span class="mi">0</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">x</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> <span class="p">})</span>
|
||||
@ -296,9 +301,9 @@ TODO: factor this out as a common method with other backends</p> </t
|
||||
<span class="nx">gdocsToJavascript</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="cm">/*</span>
|
||||
<span class="cm"> :options: (optional) optional argument dictionary:</span>
|
||||
<span class="cm"> columnsToUse: list of columns to use (specified by header names)</span>
|
||||
<span class="cm"> columnsToUse: list of columns to use (specified by field names)</span>
|
||||
<span class="cm"> colTypes: dictionary (with column names as keys) specifying types (e.g. range, percent for use in conversion).</span>
|
||||
<span class="cm"> :return: tabular data object (hash with keys: header and data).</span>
|
||||
<span class="cm"> :return: tabular data object (hash with keys: field and data).</span>
|
||||
|
||||
<span class="cm"> Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.</span>
|
||||
<span class="cm"> */</span>
|
||||
@ -307,25 +312,25 @@ TODO: factor this out as a common method with other backends</p> </t
|
||||
<span class="nx">options</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="s1">'header'</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="s1">'field'</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="s1">'data'</span><span class="o">:</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>default is no special info on type of columns</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">colTypes</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">colTypes</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">colTypes</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">colTypes</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>either extract column headings from spreadsheet directly, or used supplied ones</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</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>columns set to subset supplied</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">results</span><span class="p">.</span><span class="nx">header</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</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>either extract column headings from spreadsheet directly, or used supplied ones</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</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>columns set to subset supplied</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</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>set columns to use to be all available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">k</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'gsx'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">k</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">header</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">col</span><span class="p">);</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">col</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</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>converts non numberical values that should be numerical (22.3%[string] -> 0.223[float])</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">rep</span> <span class="o">=</span> <span class="sr">/^([\d\.\-]+)\%$/</span><span class="p">;</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">row</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">results</span><span class="p">.</span><span class="nx">header</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">results</span><span class="p">.</span><span class="nx">header</span><span class="p">[</span><span class="nx">k</span><span class="p">];</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">[</span><span class="nx">k</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">_keyname</span> <span class="o">=</span> <span class="s1">'gsx$'</span> <span class="o">+</span> <span class="nx">col</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">entry</span><span class="p">[</span><span class="nx">_keyname</span><span class="p">][</span><span class="s1">'$t'</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>if labelled as % and value contains %, convert</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">colTypes</span><span class="p">[</span><span class="nx">col</span><span class="p">]</span> <span class="o">==</span> <span class="s1">'percent'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">rep</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> <span class="p">{</span>
|
||||
|
||||
138
docs/model.html
138
docs/model.html
@ -1,72 +1,104 @@
|
||||
<!DOCTYPE html> <html> <head> <title>model.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> model.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> <h1>Recline Backbone Models</h1> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html> <html> <head> <title>model.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> model.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> <h1>Recline Backbone Models</h1> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</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>A Dataset model</h2>
|
||||
|
||||
<p>Other than standard list of Backbone methods it has two important attributes:</p>
|
||||
<p>A model must have the following (Backbone) attributes:</p>
|
||||
|
||||
<ul>
|
||||
<li>fields: (aka columns) is a FieldList listing all the fields on this
|
||||
Dataset (this can be set explicitly, or, on fetch() of Dataset
|
||||
information from the backend, or as is perhaps most common on the first
|
||||
query)</li>
|
||||
<li>currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)</li>
|
||||
<li>docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Dataset'</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">model</span><span class="p">,</span> <span class="nx">backend</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">backend</span> <span class="o">&&</span> <span class="nx">backend</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">==</span> <span class="nb">String</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">backends</span><span class="p">[</span><span class="nx">backend</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">currentDocuments</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">defaultQuery</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span>
|
||||
<span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="mi">0</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>this.queryState = {};</p> </td> <td class="code"> <div class="highlight"><pre> <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> <h3>getDocuments</h3>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Dataset'</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">model</span><span class="p">,</span> <span class="nx">backend</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'query'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">backend</span> <span class="o">&&</span> <span class="nx">backend</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">==</span> <span class="nb">String</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">backends</span><span class="p">[</span><span class="nx">backend</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">currentDocuments</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Query</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">query</span><span class="p">);</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> <h3>query</h3>
|
||||
|
||||
<p>AJAX method with promise API to get rows (documents) from the backend.</p>
|
||||
<p>AJAX method with promise API to get documents from the backend.</p>
|
||||
|
||||
<p>It will query based on current query state (given by this.queryState)
|
||||
updated by queryObj (if provided).</p>
|
||||
|
||||
<p>Resulting DocumentList are used to reset this.currentDocuments and are
|
||||
also returned.</p>
|
||||
|
||||
<p>:param numRows: passed onto backend getDocuments.
|
||||
:param start: passed onto backend getDocuments.</p>
|
||||
|
||||
<p>this does not fit very well with Backbone setup. Backbone really expects you to know the ids of objects your are fetching (which you do in classic RESTful ajax-y world). But this paradigm does not fill well with data set up we have here.
|
||||
This also illustrates the limitations of separating the Dataset and the Backend</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span> <span class="o">=</span> <span class="nx">queryObj</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">defaultQuery</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span><span class="nx">size</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="mi">0</span><span class="p">},</span> <span class="k">this</span><span class="p">.</span><span class="nx">queryState</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">queryState</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">rows</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">docs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">rows</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">_doc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">dataset</span> <span class="o">=</span> <span class="nx">self</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">_doc</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">docs</span><span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">arguments</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">arguments</span><span class="p">);</span>
|
||||
also returned.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">,</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">rows</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">docs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">rows</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">_doc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">dataset</span> <span class="o">=</span> <span class="nx">self</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">_doc</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">docs</span><span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">arguments</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">arguments</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toTemplateJSON</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">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">data</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">docCount</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
|
||||
<span class="nx">toTemplateJSON</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">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">data</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">docCount</span><span class="p">;</span>
|
||||
<span class="nx">data</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
|
||||
<span class="p">}</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> <h2>A Document (aka Row)</h2>
|
||||
|
||||
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</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> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'DocumentList'</span><span class="p">,</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</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> <h2>A Field (aka Column) on a Dataset</h2>
|
||||
|
||||
<p>Following attributes as standard:</p>
|
||||
|
||||
<ul>
|
||||
<li>id: a unique identifer for this field- usually this should match the key in the documents hash</li>
|
||||
<li>label: the visible label used for this field</li>
|
||||
<li>type: the type of the data</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="s1">'String'</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>In addition to normal backbone initialization via a Hash you can also
|
||||
just pass a single argument representing id to the ctor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</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>if a hash not passed in the first argument is set as value for key 0</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">'0'</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'Looks like you did not pass a proper hash with id to Field constructor'</span><span class="p">);</span>
|
||||
<span class="p">}</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> <h2>A Document (aka Row)</h2>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">label</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">label</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</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> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'DocumentList'</span><span class="p">,</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</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> <h2>Backend registry</h2>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Field</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> <h2>A Query object storing Dataset Query state</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Query</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span>
|
||||
<span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="mi">0</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> <h2>Backend registry</h2>
|
||||
|
||||
<p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">}(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">));</span>
|
||||
|
||||
|
||||
213
docs/view-flot-graph.html
Normal file
213
docs/view-flot-graph.html
Normal file
@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view-flot-graph.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-flot-graph.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> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</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>Graph view for a Dataset using Flot graphing library.</h2>
|
||||
|
||||
<p>Initialization arguments:</p>
|
||||
|
||||
<ul>
|
||||
<li>model: recline.Model.Dataset</li>
|
||||
<li><p>config: (optional) graph configuration hash of form:</p>
|
||||
|
||||
<p>{
|
||||
group: {column name for x-axis},
|
||||
series: [{column name for series A}, {column name series B}, ... ],
|
||||
graphType: 'line'
|
||||
}</p></li>
|
||||
</ul>
|
||||
|
||||
<p>NB: should <em>not</em> provide an el argument to the view but must let the view
|
||||
generate the element itself (you can then append view.el to the DOM.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FlotGraph</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">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"data-graph-container"</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="editor"> \</span>
|
||||
<span class="s1"> <div class="editor-info editor-hide-info"> \</span>
|
||||
<span class="s1"> <h3 class="action-toggle-help">Help &raquo;</h3> \</span>
|
||||
<span class="s1"> <p>To create a chart select a column (group) to use as the x-axis \</span>
|
||||
<span class="s1"> then another column (Series A) to plot against it.</p> \</span>
|
||||
<span class="s1"> <p>You can add add \</span>
|
||||
<span class="s1"> additional series by clicking the "Add series" button</p> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <form class="form-stacked"> \</span>
|
||||
<span class="s1"> <div class="clearfix"> \</span>
|
||||
<span class="s1"> <label>Graph Type</label> \</span>
|
||||
<span class="s1"> <div class="input editor-type"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> <option value="line">Line</option> \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <label>Group Column (x-axis)</label> \</span>
|
||||
<span class="s1"> <div class="input editor-group"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-series-group"> \</span>
|
||||
<span class="s1"> <div class="editor-series"> \</span>
|
||||
<span class="s1"> <label>Series <span>A (y-axis)</span></label> \</span>
|
||||
<span class="s1"> <div class="input"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons"> \</span>
|
||||
<span class="s1"> <button class="btn editor-add">Add Series</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \</span>
|
||||
<span class="s1"> <button class="editor-save">Save</button> \</span>
|
||||
<span class="s1"> <input type="hidden" class="editor-id" value="chart-1" /> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="panel graph"></div> \</span>
|
||||
<span class="s1"></div> \</span>
|
||||
<span class="s1">'</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'change form select'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .editor-add'</span><span class="o">:</span> <span class="s1">'addSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-remove-series'</span><span class="o">:</span> <span class="s1">'removeSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-toggle-help'</span><span class="o">:</span> <span class="s1">'toggleHelp'</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="nx">config</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</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">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'redraw'</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>we need the model.fields to render properly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</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">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</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">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">configFromHash</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">().</span><span class="nx">graph</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">configFromHash</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">configFromHash</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">configFromHash</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">group</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">series</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">graphType</span><span class="o">:</span> <span class="s1">'line'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">configFromHash</span><span class="p">,</span>
|
||||
<span class="nx">config</span>
|
||||
<span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">htmls</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</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">toTemplateJSON</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">htmls</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>now set a load of stuff up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$graph</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.panel.graph'</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>for use later when adding additional series
|
||||
could be simpler just to have a common template!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series'</span><span class="p">).</span><span class="nx">clone</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onEditorSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">select</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-group select'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_getEditorData</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>update navigation
|
||||
TODO: make this less invasive (e.g. preserve other keys in query string)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="nx">qs</span><span class="p">[</span><span class="s1">'graph'</span><span class="p">]</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">;</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span><span class="p">(</span><span class="nx">qs</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</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>There appear to be issues generating a Flot graph if either:</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <ul>
|
||||
<li><p>The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with</p>
|
||||
|
||||
<p>Uncaught Invalid dimensions for plot, width = 0, height = 0</p></li>
|
||||
<li>There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value' </li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">areWeVisible</span> <span class="o">=</span> <span class="o">!</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">expr</span><span class="p">.</span><span class="nx">filters</span><span class="p">.</span><span class="nx">hidden</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="mi">0</span><span class="p">]);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">&&</span> <span class="p">(</span><span class="o">!</span><span class="nx">areWeVisible</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="nx">currentDocuments</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">return</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>create this.plot and cache it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">plot</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>only lines for the present</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'line'</span><span class="p">,</span>
|
||||
<span class="nx">name</span><span class="o">:</span> <span class="s1">'Line Chart'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">plot</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$graph</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSeries</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">plot</span><span class="p">.</span><span class="nx">setData</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">());</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">resize</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">setupGrid</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">draw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">_getEditorData</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$editor</span> <span class="o">=</span> <span class="k">this</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">makeArray</span><span class="p">(</span><span class="nx">series</span><span class="p">)</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-group select'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">createSeries</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">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">series</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">seriesIndex</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">x</span> <span class="o">===</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">points</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">series</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">points</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="nx">field</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">series</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>Public: Adds a new empty series select box to the editor.</p>
|
||||
|
||||
<p>All but the first select box will have a remove button that allows them
|
||||
to be removed.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span><span class="p">.</span><span class="nx">clone</span><span class="p">(),</span>
|
||||
<span class="nx">label</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'label'</span><span class="p">),</span>
|
||||
<span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</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">find</span><span class="p">(</span><span class="s1">'.editor-series-group'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">' [<a href="#remove" class="action-remove-series">Remove</a>]'</span><span class="p">);</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">64</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</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>Public: Removes a series list item from the editor.</p>
|
||||
|
||||
<p>Also updates the labels of the remaining series elements.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">parent</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">labelSpan</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">prev</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">);</span>
|
||||
<span class="nx">labelSpan</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">index</span> <span class="o">+</span> <span class="mi">65</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">onEditorSubmit</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toggleHelp</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">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-info'</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'editor-hide-info'</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>Private: Resets the series property to reference the select elements.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_updateSeries</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">$series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series select'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view.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> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.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> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html> <html> <head> <title>view.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.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> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</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>DataExplorer</h2>
|
||||
@ -106,7 +106,7 @@ FlotGraph subview.</p> </td> <td class="code">
|
||||
<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>this must be called after pageViews are created</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupRouting</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>retrieve basic data like headers etc
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupRouting</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>retrieve basic data like fields etc
|
||||
note this.model and dataset returned are the same</p> </td> <td class="code"> <div class="highlight"><pre> <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="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.doc-count'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">||</span> <span class="s1">'Unknown'</span><span class="p">);</span>
|
||||
@ -193,7 +193,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenHeaders</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -212,7 +212,7 @@ showDialog: function(template, data) {
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>======================================================
|
||||
Column and row menus</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onColumnHeaderClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">text</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'.column-header'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'columnActions'</span><span class="p">,</span> <span class="s1">'data-table-menu'</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
@ -225,7 +225,7 @@ Column and row menus</p> </td> <td class="code">
|
||||
|
||||
<span class="nx">onRootHeaderClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'rootActions'</span><span class="p">,</span> <span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="p">{</span><span class="s1">'columns'</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">hiddenHeaders</span><span class="p">});</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'rootActions'</span><span class="p">,</span> <span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="p">{</span><span class="s1">'columns'</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onMenuClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -294,17 +294,20 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">setColumnSort</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">order</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</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">queryState</span><span class="p">,</span> <span class="p">{</span><span class="nx">sort</span><span class="o">:</span> <span class="p">[[</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">,</span> <span class="nx">order</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">query</span><span class="p">(</span><span class="nx">query</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">query</span><span class="p">({</span>
|
||||
<span class="nx">sort</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">,</span> <span class="nx">order</span><span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">hideColumn</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">hiddenHeaders</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenHeaders</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">without</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hiddenHeaders</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'column'</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">without</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'column'</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</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>======================================================</p>
|
||||
|
||||
@ -322,15 +325,15 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </th> \</span>
|
||||
<span class="s1"> {{/notEmpty}} \</span>
|
||||
<span class="s1"> {{#headers}} \</span>
|
||||
<span class="s1"> <th class="column-header"> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \</span>
|
||||
<span class="s1"> <div class="column-header-title"> \</span>
|
||||
<span class="s1"> <a class="column-header-menu"></a> \</span>
|
||||
<span class="s1"> <span class="column-header-name">{{.}}</span> \</span>
|
||||
<span class="s1"> <span class="column-header-name">{{label}}</span> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </th> \</span>
|
||||
<span class="s1"> {{/headers}} \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> </thead> \</span>
|
||||
<span class="s1"> <tbody></tbody> \</span>
|
||||
@ -339,14 +342,13 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
|
||||
<span class="nx">toTemplateJSON</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">modelData</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="nx">toJSON</span><span class="p">()</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span> <span class="p">)</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">headers</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">headers</span><span class="p">;</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</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>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span> <span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">modelData</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</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">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">headers</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</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">get</span><span class="p">(</span><span class="s1">'headers'</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">header</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenHeaders</span><span class="p">,</span> <span class="nx">header</span><span class="p">)</span> <span class="o">==</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">fields</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="nx">fields</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">,</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</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="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</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">htmls</span><span class="p">);</span>
|
||||
@ -356,20 +358,20 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="kd">var</span> <span class="nx">newView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataTableRow</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">doc</span><span class="p">,</span>
|
||||
<span class="nx">el</span><span class="o">:</span> <span class="nx">tr</span><span class="p">,</span>
|
||||
<span class="nx">headers</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">headers</span><span class="p">,</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</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">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenHeaders</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</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">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</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> <h2>DataTableRow View for rendering an individual document.</h2>
|
||||
<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> <h2>DataTableRow View for rendering an individual document.</h2>
|
||||
|
||||
<p>Since we want this to update in place it is up to creator to provider the element to attach to.
|
||||
In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataTableRow</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>
|
||||
In addition you must pass in a fields in the constructor options. This should be list of fields for the DataTable.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataTableRow</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="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_headers</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</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="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
@ -377,7 +379,7 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <td><a class="row-header-menu"></a></td> \</span>
|
||||
<span class="s1"> {{#cells}} \</span>
|
||||
<span class="s1"> <td data-header="{{header}}"> \</span>
|
||||
<span class="s1"> <td data-field="{{field}}"> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-content"> \</span>
|
||||
<span class="s1"> <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-value">{{value}}</div> \</span>
|
||||
@ -386,14 +388,14 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="s1"> {{/cells}} \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .data-table-cell-edit'</span><span class="o">:</span> <span class="s1">'onEditClick'</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>cell editor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s1">'click .data-table-cell-editor .okButton'</span><span class="o">:</span> <span class="s1">'onEditorOK'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-cell-edit'</span><span class="o">:</span> <span class="s1">'onEditClick'</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>cell editor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s1">'click .data-table-cell-editor .okButton'</span><span class="o">:</span> <span class="s1">'onEditorOK'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-cell-editor .cancelButton'</span><span class="o">:</span> <span class="s1">'onEditorCancel'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toTemplateJSON</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">doc</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="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_headers</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">header</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">header</span><span class="o">:</span> <span class="nx">header</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">header</span><span class="p">)}</span>
|
||||
<span class="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">)}</span>
|
||||
<span class="p">})</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
@ -403,7 +405,7 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</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">html</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</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> <h1>Cell Editor</h1> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <h1>Cell Editor</h1> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">editing</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-table-cell-editor-editor'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">editing</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-edit'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
@ -417,10 +419,10 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="nx">onEditorOK</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">rowId</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'tr'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-id'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">header</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'td'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-header'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'td'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">newValue</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-editor'</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-table-cell-editor-editor'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">newData</span><span class="p">[</span><span class="nx">header</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
|
||||
<span class="nx">newData</span><span class="p">[</span><span class="nx">field</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</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">set</span><span class="p">(</span><span class="nx">newData</span><span class="p">);</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Updating row..."</span><span class="p">,</span> <span class="p">{</span><span class="nx">loader</span><span class="o">:</span> <span class="kc">true</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">save</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -441,7 +443,17 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="p">});</span>
|
||||
|
||||
|
||||
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Parse the Hash section of a URL into path and query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">parsed</span> <span class="o">=</span> <span class="nx">urlPathRegex</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">parsed</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{};</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">path</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">2</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-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">urlParams</span> <span class="o">=</span> <span class="p">{},</span>
|
||||
<span class="nx">e</span><span class="p">,</span> <span class="nx">d</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">unescape</span><span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\+/g</span><span class="p">,</span> <span class="s2">" "</span><span class="p">));</span>
|
||||
@ -451,10 +463,25 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">q</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">.</span><span class="nx">length</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">'?'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">q</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
|
||||
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">urlParams</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <h2>notify</h2>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">q</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">).</span><span class="nx">query</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="s1">'?'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">items</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">key</span> <span class="o">+</span> <span class="s1">'='</span> <span class="o">+</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">value</span><span class="p">));</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">queryString</span> <span class="o">+=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'&'</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="nx">queryString</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</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">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span> <span class="o">+</span> <span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <h2>notify</h2>
|
||||
|
||||
<p>Create a notification (a div.alert-message in div.alert-messsages) using provide messages and options. Options are:</p>
|
||||
|
||||
@ -486,7 +513,7 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <h2>clearNotifications</h2>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <h2>clearNotifications</h2>
|
||||
|
||||
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</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">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.data-explorer .alert-message'</span><span class="p">);</span>
|
||||
|
||||
@ -149,6 +149,7 @@ Backbone.history.start();
|
||||
<li><a href="docs/model.html">Models</a></li>
|
||||
<li><a href="docs/backend.html">Backends</a></li>
|
||||
<li><a href="docs/view.html">Views including the main Data Explorer</a></li>
|
||||
<li><a href="docs/view-flot-graph.html">Graph View (based on Flot)</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="tests">Tests</h2>
|
||||
|
||||
1388
recline.js
1388
recline.js
File diff suppressed because it is too large
Load Diff
@ -1,10 +1,9 @@
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
// Views module following classic module pattern
|
||||
(function($, my) {
|
||||
|
||||
// Graph view for a Dataset using Flot graphing library.
|
||||
// ## Graph view for a Dataset using Flot graphing library.
|
||||
//
|
||||
// Initialization arguments:
|
||||
//
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user