Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Tweaks to "prefixed attributes" from colinta, part of #78.

  • Loading branch information...
commit 90986146bb98a255b131ba455e0e6968ff28be16 1 parent b5ec938
Maurice Machado authored
36 docs/coffeekup.html
View
@@ -101,9 +101,11 @@
<span class="nx">text</span> <span class="nx">c</span>
<span class="nx">text</span> <span class="s1">&#39;&quot;&#39;</span>
- <span class="nv">render_attrs: </span><span class="nf">(obj) -&gt;</span>
- <span class="k">for</span> <span class="nx">k</span><span class="p">,</span> <span class="nx">v</span> <span class="k">of</span> <span class="nx">obj</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>true is rendered as <code>selected="selected"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;boolean&#39;</span> <span class="o">and</span> <span class="nx">v</span>
- <span class="nv">v = </span><span class="nx">k</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>undefined, false and null result in the attribute not being rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="nx">v</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>strings, numbers, objects, arrays and functions are rendered "as is".</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">text</span> <span class="s2">&quot; #{k}=\&quot;#{@esc(v)}\&quot;&quot;</span>
+ <span class="nv">render_attrs: </span><span class="nf">(obj, prefix = &#39;&#39;) -&gt;</span>
+ <span class="k">for</span> <span class="nx">k</span><span class="p">,</span> <span class="nx">v</span> <span class="k">of</span> <span class="nx">obj</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p><code>true</code> is rendered as <code>selected="selected"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;boolean&#39;</span> <span class="o">and</span> <span class="nx">v</span>
+ <span class="nv">v = </span><span class="nx">k</span>
+
+ <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;object&#39;</span> <span class="o">and</span> <span class="nx">v</span> <span class="o">not</span> <span class="k">instanceof</span> <span class="nb">Array</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p><code>data: {icon: 'foo'}</code> is rendered as <code>data-icon="foo"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">@render_attrs</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span> <span class="nx">prefix</span> <span class="o">+</span> <span class="nx">k</span> <span class="o">+</span> <span class="s1">&#39;-&#39;</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">&#182;</a> </div> <p>undefined, false and null result in the attribute not being rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">else</span> <span class="k">if</span> <span class="nx">v</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>strings, numbers, arrays and functions are rendered "as is".</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">text</span> <span class="s2">&quot; #{prefix + k}=\&quot;#{@esc(v)}\&quot;&quot;</span>
<span class="nv">render_contents: </span><span class="nf">(contents) -&gt;</span>
<span class="k">switch</span> <span class="k">typeof</span> <span class="nx">contents</span>
@@ -187,15 +189,15 @@
<span class="nx">text</span> <span class="s1">&#39;\n&#39;</span> <span class="k">if</span> <span class="nx">data</span><span class="p">.</span><span class="nx">format</span>
<span class="nv">coffeescript = </span><span class="nf">(param) -&gt;</span>
- <span class="k">switch</span> <span class="k">typeof</span> <span class="nx">param</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p><code>coffeescript -&gt; alert 'hi'</code> becomes:
+ <span class="k">switch</span> <span class="k">typeof</span> <span class="nx">param</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p><code>coffeescript -&gt; alert 'hi'</code> becomes:
<code>&lt;script&gt;;(function () {return alert('hi');})();&lt;/script&gt;</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">when</span> <span class="s1">&#39;function&#39;</span>
- <span class="nx">script</span> <span class="s2">&quot;#{__ck.coffeescript_helpers}(#{param}).call(this);&quot;</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p><code>coffeescript "alert 'hi'"</code> becomes:
+ <span class="nx">script</span> <span class="s2">&quot;#{__ck.coffeescript_helpers}(#{param}).call(this);&quot;</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p><code>coffeescript "alert 'hi'"</code> becomes:
<code>&lt;script type="text/coffeescript"&gt;alert 'hi'&lt;/script&gt;</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">when</span> <span class="s1">&#39;string&#39;</span>
- <span class="nx">script</span> <span class="nv">type: </span><span class="s1">&#39;text/coffeescript&#39;</span><span class="p">,</span> <span class="o">-&gt;</span> <span class="nx">param</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p><code>coffeescript src: 'script.coffee'</code> becomes:
+ <span class="nx">script</span> <span class="nv">type: </span><span class="s1">&#39;text/coffeescript&#39;</span><span class="p">,</span> <span class="o">-&gt;</span> <span class="nx">param</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p><code>coffeescript src: 'script.coffee'</code> becomes:
<code>&lt;script type="text/coffeescript" src="script.coffee"&gt;&lt;/script&gt;</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">when</span> <span class="s1">&#39;object&#39;</span>
<span class="nv">param.type = </span><span class="s1">&#39;text/coffeescript&#39;</span>
<span class="nx">script</span> <span class="nx">param</span>
- </pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>Conditional IE comments.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">ie = </span><span class="nf">(condition, contents) -&gt;</span>
+ </pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Conditional IE comments.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">ie = </span><span class="nf">(condition, contents) -&gt;</span>
<span class="nx">__ck</span><span class="p">.</span><span class="nx">indent</span><span class="p">()</span>
<span class="nx">text</span> <span class="s2">&quot;&lt;!--[if #{condition}]&gt;&quot;</span>
@@ -203,23 +205,23 @@
<span class="nx">text</span> <span class="s2">&quot;&lt;![endif]--&gt;&quot;</span>
<span class="nx">text</span> <span class="s1">&#39;\n&#39;</span> <span class="k">if</span> <span class="nx">data</span><span class="p">.</span><span class="nx">format</span>
- <span class="kc">null</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Stringify the skeleton and unwrap it from its enclosing <code>function(){}</code>, then
+ <span class="kc">null</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Stringify the skeleton and unwrap it from its enclosing <code>function(){}</code>, then
add the CoffeeScript helpers.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">skeleton = </span><span class="nb">String</span><span class="p">(</span><span class="nx">skeleton</span><span class="p">)</span>
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/function\s*\(.*\)\s*\{/</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/return null;\s*\}$/</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">)</span>
-<span class="nv">skeleton = </span><span class="nx">coffeescript_helpers</span> <span class="o">+</span> <span class="nx">skeleton</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Compiles a template into a standalone JavaScript function.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">coffeekup.compile = </span><span class="nf">(template, options = {}) -&gt;</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>The template can be provided as either a function or a CoffeeScript string
+<span class="nv">skeleton = </span><span class="nx">coffeescript_helpers</span> <span class="o">+</span> <span class="nx">skeleton</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Compiles a template into a standalone JavaScript function.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">coffeekup.compile = </span><span class="nf">(template, options = {}) -&gt;</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>The template can be provided as either a function or a CoffeeScript string
(in the latter case, the CoffeeScript compiler must be available).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">template</span> <span class="o">is</span> <span class="s1">&#39;function&#39;</span> <span class="k">then</span> <span class="nv">template = </span><span class="nb">String</span><span class="p">(</span><span class="nx">template</span><span class="p">)</span>
<span class="k">else</span> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">template</span> <span class="o">is</span> <span class="s1">&#39;string&#39;</span> <span class="o">and</span> <span class="nx">coffee</span><span class="o">?</span>
<span class="nv">template = </span><span class="nx">coffee</span><span class="p">.</span><span class="nx">compile</span> <span class="nx">template</span><span class="p">,</span> <span class="nv">bare: </span><span class="kc">yes</span>
- <span class="nv">template = </span><span class="s2">&quot;function(){#{template}}&quot;</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>If an object <code>hardcode</code> is provided, insert the stringified value
+ <span class="nv">template = </span><span class="s2">&quot;function(){#{template}}&quot;</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>If an object <code>hardcode</code> is provided, insert the stringified value
of each variable directly in the function body. This is a less flexible but
faster alternative to the standard method of using <code>with</code> (see below). </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">hardcoded_locals = </span><span class="s1">&#39;&#39;</span>
<span class="k">if</span> <span class="nx">options</span><span class="p">.</span><span class="nx">hardcode</span>
<span class="k">for</span> <span class="nx">k</span><span class="p">,</span> <span class="nx">v</span> <span class="k">of</span> <span class="nx">options</span><span class="p">.</span><span class="nx">hardcode</span>
- <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;function&#39;</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Make sure these functions have access to <code>data</code> as <code>@/this</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = function(){return (#{v}).apply(data, arguments);};&quot;</span>
- <span class="k">else</span> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = #{JSON.stringify v};&quot;</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Add a function for each tag this template references. We don't want to have
+ <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;function&#39;</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Make sure these functions have access to <code>data</code> as <code>@/this</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = function(){return (#{v}).apply(data, arguments);};&quot;</span>
+ <span class="k">else</span> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = #{JSON.stringify v};&quot;</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Add a function for each tag this template references. We don't want to have
all hundred-odd tags wasting space in the compiled function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">tag_functions = </span><span class="s1">&#39;&#39;</span>
<span class="nv">tags_used = </span><span class="p">[]</span>
@@ -229,11 +231,11 @@
<span class="nx">tag_functions</span> <span class="o">+=</span> <span class="s2">&quot;var #{tags_used.join &#39;,&#39;};&quot;</span>
<span class="k">for</span> <span class="nx">t</span> <span class="k">in</span> <span class="nx">tags_used</span>
- <span class="nx">tag_functions</span> <span class="o">+=</span> <span class="s2">&quot;#{t} = function(){return __ck.tag(&#39;#{t}&#39;, arguments);};&quot;</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Main function assembly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">code = </span><span class="nx">tag_functions</span> <span class="o">+</span> <span class="nx">hardcoded_locals</span> <span class="o">+</span> <span class="nx">skeleton</span>
+ <span class="nx">tag_functions</span> <span class="o">+=</span> <span class="s2">&quot;#{t} = function(){return __ck.tag(&#39;#{t}&#39;, arguments);};&quot;</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Main function assembly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">code = </span><span class="nx">tag_functions</span> <span class="o">+</span> <span class="nx">hardcoded_locals</span> <span class="o">+</span> <span class="nx">skeleton</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.doctypes = #{JSON.stringify coffeekup.doctypes};&quot;</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.coffeescript_helpers = #{JSON.stringify coffeescript_helpers};&quot;</span>
- <span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.self_closing = #{JSON.stringify coffeekup.self_closing};&quot;</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>If <code>locals</code> is set, wrap the template inside a <code>with</code> block. This is the
+ <span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.self_closing = #{JSON.stringify coffeekup.self_closing};&quot;</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>If <code>locals</code> is set, wrap the template inside a <code>with</code> block. This is the
most flexible but slower approach to specifying local variables.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">code</span> <span class="o">+=</span> <span class="s1">&#39;with(data.locals){&#39;</span> <span class="k">if</span> <span class="nx">options</span><span class="p">.</span><span class="nx">locals</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;(#{template}).call(data);&quot;</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s1">&#39;}&#39;</span> <span class="k">if</span> <span class="nx">options</span><span class="p">.</span><span class="nx">locals</span>
@@ -241,7 +243,7 @@
<span class="k">new</span> <span class="nb">Function</span><span class="p">(</span><span class="s1">&#39;data&#39;</span><span class="p">,</span> <span class="nx">code</span><span class="p">)</span>
-<span class="nv">cache = </span><span class="p">{}</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Template in, HTML out. Accepts functions or strings as does <code>coffeekup.compile</code>.</p>
+<span class="nv">cache = </span><span class="p">{}</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Template in, HTML out. Accepts functions or strings as does <code>coffeekup.compile</code>.</p>
<p>Accepts an option <code>cache</code>, by default <code>false</code>. If set to <code>false</code> templates will
be recompiled each time.</p>
@@ -259,7 +261,7 @@
<span class="nx">tpl</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span>
<span class="nx">unless</span> <span class="nb">window</span><span class="o">?</span>
- <span class="nv">coffeekup.adapters =</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Legacy adapters for when CoffeeKup expected data in the <code>context</code> attribute.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">simple: </span><span class="nx">coffeekup</span><span class="p">.</span><span class="nx">render</span>
+ <span class="nv">coffeekup.adapters =</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Legacy adapters for when CoffeeKup expected data in the <code>context</code> attribute.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">simple: </span><span class="nx">coffeekup</span><span class="p">.</span><span class="nx">render</span>
<span class="nv">meryl: </span><span class="nx">coffeekup</span><span class="p">.</span><span class="nx">render</span>
<span class="nv">express:</span>
@@ -269,7 +271,7 @@
<span class="nb">Error</span><span class="p">.</span><span class="nx">captureStackTrace</span> <span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">.</span><span class="nx">callee</span>
<span class="nv">name: </span><span class="s1">&#39;TemplateError&#39;</span>
- <span class="nv">compile: </span><span class="nf">(template, data) -&gt;</span> </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Allows <code>partial 'foo'</code> instead of <code>text @partial 'foo'</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">data</span><span class="p">.</span><span class="nx">hardcode</span> <span class="o">?=</span> <span class="p">{}</span>
+ <span class="nv">compile: </span><span class="nf">(template, data) -&gt;</span> </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Allows <code>partial 'foo'</code> instead of <code>text @partial 'foo'</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">data</span><span class="p">.</span><span class="nx">hardcode</span> <span class="o">?=</span> <span class="p">{}</span>
<span class="nv">data.hardcode.partial = </span><span class="o">-&gt;</span>
<span class="nx">text</span> <span class="nx">@partial</span><span class="p">.</span><span class="nx">apply</span> <span class="err">@</span><span class="p">,</span> <span class="nx">arguments</span>
47 docs/reference.md
View
@@ -70,8 +70,6 @@ By far the most important of these functions are those equivalent to each HTML e
They're designed to look very similar to their HTML output when written in CoffeeScript.
-Below are examples on using these functions, their equivalent JavaScript code, and the corresponding HTML output.
-
Empty tags:
div()
@@ -82,63 +80,68 @@ Empty tags:
Attributes:
- img src: '/foo.png', alt: 'Foo'
- img({src: '/foo.png', alt: 'Foo'});
- <img src="/foo.png" alt="Foo" />
+ div str: 'str', num: 42, bool: yes, arr: [1, 2, 3], obj: {foo: 'bar', ping: 'pong'}
+ <div str="str" num="42" bool="bool" arr="1,2,3" obj-foo="bar" obj-ping="pong"><div>
Contents (string):
h1 'foo'
- h1('foo');
<h1>Foo</h1>
+
+ h1 attr: 'value', 'foo'
+ <h1 attr="value">Foo</h1>
script '''
alert('foo');
console.log('bar');
'''
- script("alert('foo');\nconsole.log('bar');");
<script>alert('foo');
console.log('bar');</script>
Contents (function):
div -> 'Foo'
- div(function(){return 'Foo'});
<div>Foo</div>
-
+
+ # equivalent to js: div(function(){'Foo'; return 'Bar';});
div ->
'Foo'
'Bar'
- div(function(){'Foo'; return 'Bar';});
- <div>Bar</div>
-
+ <div>
+ Bar
+ </div>
+
+ # equivalent to js: div(function(){'Foo'; div('Ping'); return 'Bar';});
div ->
'Foo'
div 'Ping'
'Bar'
- div(function(){'Foo'; div('Ping'); return 'Bar';});
- <div><div>Ping</div>Bar</div>
+ <div>
+ <div>Ping</div>
+ Bar
+ </div>
+ # equivalent to js: div(function(){text('Foo'); div('Ping'); return 'Bar';});
div ->
text 'Foo'
div 'Ping'
'Bar'
- div(function(){text('Foo'); div('Ping'); return 'Bar';});
- <div>Foo<div>Ping</div>Bar</div>
+ <div>
+ Foo
+ <div>Ping</div>
+ Bar
+ </div>
ID/class shortcut
div '#id.class.anotherclass', 'string contents'
- div('#id.class.anotherclass', 'string contents');
- <div id="id" class="class anotherclass"></div>
+ <div id="id" class="class anotherclass">string contents</div>
div '#id.class.anotherclass', -> h1 'Hullo'
- div('#id.class.anotherclass', function(){return h1('hullo')});
<div id="id" class="class anotherclass"><h1>Hullo</h1></div>
- div '#id.class.anotherclass', style: 'position: fixed'
- div('#id.class.anotherclass', {style: 'position: fixed'});
- <div id="id" class="class anotherclass" style="position: fixed"></div>
+ div '#id.class.anotherclass', style: 'position: fixed', 'string contents'
+ <div id="id" class="class anotherclass" style="position: fixed">string contents</div>
### Other locals
9 src/coffeekup.coffee
View
@@ -142,17 +142,16 @@ skeleton = (data = {}) ->
render_attrs: (obj, prefix = '') ->
for k, v of obj
- # true is rendered as `selected="selected"`.
+ # `true` is rendered as `selected="selected"`.
if typeof v is 'boolean' and v
v = k
- if typeof v is 'object'
- # if you have a lot of data attributes, it gets repetitive to keep typing 'data-'
- # plus, it looks really good to group them together, e.g. data: { icon: 'gear', iconpos: 'right' }
+ if typeof v is 'object' and v not instanceof Array
+ # `data: {icon: 'foo'}` is rendered as `data-icon="foo"`.
@render_attrs(v, prefix + k + '-')
# undefined, false and null result in the attribute not being rendered.
else if v
- # strings, numbers, objects, arrays and functions are rendered "as is".
+ # strings, numbers, arrays and functions are rendered "as is".
text " #{prefix + k}=\"#{@esc(v)}\""
render_contents: (contents) ->
4 test.coffee
View
@@ -137,8 +137,8 @@ tests =
expected: '<img id="myid" class="myclass" src="/pic.png" />'
'Attribute values':
- template: "br vrai: yes, faux: no, undef: @foo, nil: null, str: 'str', num: 42, arr: [1, 2, 3], obj: {foo: 'bar'}, func: ->, "
- expected: '<br vrai="vrai" str="str" num="42" arr="1,2,3" obj="[object Object]" func="function () {}" />'
+ template: "br vrai: yes, faux: no, undef: @foo, nil: null, str: 'str', num: 42, arr: [1, 2, 3], obj: {foo: 'bar'}, func: ->"
+ expected: '<br vrai="vrai" str="str" num="42" arr="1,2,3" obj-foo="bar" func="function () {}" />'
'IE conditionals':
template: """
Please sign in to comment.
Something went wrong with that request. Please try again.