knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
datahub/docs/src/view.transform.html
Frederick Ros 01d59a8b6b Moved to backbone 0.9.2 and underscoe 1.4.2
2012-10-11 17:23:20 +02:00

124 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE html> <html> <head> <title>view.transform.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.transform.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<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></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Views module following classic module pattern</p> </td> <td class="code"> <div class="highlight"><pre><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-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>ColumnTransform</h2>
<p>View (Dialog) for doing data transformations</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Transform</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">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;recline-transform&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;script&quot;&gt; \</span>
<span class="s1"> &lt;h2&gt; \</span>
<span class="s1"> Transform Script \</span>
<span class="s1"> &lt;button class=&quot;okButton btn btn-primary&quot;&gt;Run on all records&lt;/button&gt; \</span>
<span class="s1"> &lt;/h2&gt; \</span>
<span class="s1"> &lt;textarea class=&quot;expression-preview-code&quot;&gt;&lt;/textarea&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;expression-preview-parsing-status&quot;&gt; \</span>
<span class="s1"> No syntax error. \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;preview&quot;&gt; \</span>
<span class="s1"> &lt;h3&gt;Preview&lt;/h3&gt; \</span>
<span class="s1"> &lt;div class=&quot;expression-preview-container&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .okButton&#39;</span><span class="o">:</span> <span class="s1">&#39;onSubmit&#39;</span><span class="p">,</span>
<span class="s1">&#39;keydown .expression-preview-code&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditorKeydown&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">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="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">htmls</span> <span class="o">=</span> <span class="nx">Mustache</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">template</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">&#182;</a> </div> <p>Put in the basic (identity) transform script
TODO: put this into the template?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">editor</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">&#39;.expression-preview-code&#39;</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">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</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="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">models</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="s1">&#39;unknown&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">editor</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="s2">&quot;function(doc) {\n doc[&#39;&quot;</span><span class="o">+</span> <span class="nx">col</span> <span class="o">+</span><span class="s2">&quot;&#39;] = doc[&#39;&quot;</span><span class="o">+</span> <span class="nx">col</span> <span class="o">+</span><span class="s2">&quot;&#39;];\n return doc;\n}&quot;</span><span class="p">);</span>
<span class="nx">editor</span><span class="p">.</span><span class="nx">keydown</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">onSubmit</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">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">funcText</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">&#39;.expression-preview-code&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">editFunc</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">evalFunction</span><span class="p">(</span><span class="nx">funcText</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;recline:flash&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">&quot;Error with function! &quot;</span> <span class="o">+</span> <span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">});</span>
<span class="k">return</span><span class="p">;</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">transform</span><span class="p">(</span><span class="nx">editFunc</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">editPreviewTemplate</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;table class=&quot;table table-condensed table-bordered before-after&quot;&gt; \</span>
<span class="s1"> &lt;thead&gt; \</span>
<span class="s1"> &lt;tr&gt; \</span>
<span class="s1"> &lt;th&gt;Field&lt;/th&gt; \</span>
<span class="s1"> &lt;th&gt;Before&lt;/th&gt; \</span>
<span class="s1"> &lt;th&gt;After&lt;/th&gt; \</span>
<span class="s1"> &lt;/tr&gt; \</span>
<span class="s1"> &lt;/thead&gt; \</span>
<span class="s1"> &lt;tbody&gt; \</span>
<span class="s1"> {{#row}} \</span>
<span class="s1"> &lt;tr&gt; \</span>
<span class="s1"> &lt;td&gt; \</span>
<span class="s1"> {{field}} \</span>
<span class="s1"> &lt;/td&gt; \</span>
<span class="s1"> &lt;td class=&quot;before {{#different}}different{{/different}}&quot;&gt; \</span>
<span class="s1"> {{before}} \</span>
<span class="s1"> &lt;/td&gt; \</span>
<span class="s1"> &lt;td class=&quot;after {{#different}}different{{/different}}&quot;&gt; \</span>
<span class="s1"> {{after}} \</span>
<span class="s1"> &lt;/td&gt; \</span>
<span class="s1"> &lt;/tr&gt; \</span>
<span class="s1"> {{/row}} \</span>
<span class="s1"> &lt;/tbody&gt; \</span>
<span class="s1"> &lt;/table&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">onEditorKeydown</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">self</span> <span class="o">=</span> <span class="k">this</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">&#182;</a> </div> <p>if you don't setTimeout it won't grab the latest character if you call e.target.value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">errors</span> <span class="o">=</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">&#39;.expression-preview-parsing-status&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">editFunc</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">evalFunction</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">value</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">errors</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;No syntax error.&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">docs</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</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">doc</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">previewData</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">previewTransform</span><span class="p">(</span><span class="nx">docs</span><span class="p">,</span> <span class="nx">editFunc</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</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">&#39;.expression-preview-container&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">fields</span> <span class="o">=</span> <span class="nx">self</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">toJSON</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">rows</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">previewData</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">4</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="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</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="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">before</span><span class="o">:</span> <span class="nx">row</span><span class="p">.</span><span class="nx">before</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="nx">after</span><span class="o">:</span> <span class="nx">row</span><span class="p">.</span><span class="nx">after</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="nx">different</span><span class="o">:</span> <span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">row</span><span class="p">.</span><span class="nx">before</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="nx">row</span><span class="p">.</span><span class="nx">after</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="p">});</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="s1">&#39;&#39;</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">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">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">editPreviewTemplate</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">row</span><span class="o">:</span> <span class="nx">row</span>
<span class="p">});</span>
<span class="nx">$el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">errors</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">1</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">})(</span><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>
Reference in New Issue View Git Blame Copy Permalink