Skip to content
This repository has been archived by the owner on Mar 20, 2021. It is now read-only.

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Ryan Eastridge committed Sep 23, 2012
1 parent d7c8656 commit 7d45bfe
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 57 deletions.
36 changes: 30 additions & 6 deletions beta/collection.html
View file
Expand Up @@ -61,6 +61,10 @@

<ul>

<li>
<a href="#thorax-collectionview/setcollection-view-setcollection-collection-options">setCollection </a>
</li>

<li>
<a href="#thorax-collectionview/appenditem-view-appenditem-modelorview-index">appendItem </a>
</li>
Expand Down Expand Up @@ -154,13 +158,13 @@ <h3 id="view-helpers/collection-collection-collectionobj-options" class="signatu
<li><code>empty-context</code> - A function in the declaring view to specify the context that the empty-template is rendered with. If the view has an <code>emptyContext</code> function it will be used as the default.</li>
<li><code>loading-template</code> - Only available if the loading plugin has been included. A template to append when the collection is loading.</li>
<li><code>loading-view</code> - Only available if loading plugin has been included. A view to append when the collection is loading</li>
<li><code>filter</code> - A method on the view to filter which items are rendered. Recieves (model, index) and must return boolean.</li>
<li><code>filter</code> - A method on the view, which will filter which items are rendered. Recieves (model, index) and must return boolean. The filter will be applied when models' fire a change event, or models are added and removed from the collection. To force a collection to re-filter, trigger a <code>filter</code> event on the collection.</li>
</ul>
<p>Any of the options can be specified as variables in addition to strings:

</p>
<pre><code>{{<span class="title">collection</span> cats item-view=itemViewClass}}</code></pre>
<p><code>CollectionView</code> instances are created via a helper and not directly in a JavaScript API, so to get a reference to them you need to use the <code>helper:collection</code> event:
<p><code>CollectionView</code> instances are usually created via a helper and not directly in JavaScript. If you need a reference to a specific CollectionView you can create it directly (see <code>Thorax.CollectionView</code> below) or use the <code>helper:collection</code> event when creating them via a helper:

</p>
<pre><code><span class="tag">view</span><span class="class">.on</span>("<span class="tag">helper</span><span class="pseudo">:collection"</span>, <span class="tag">function</span>(<span class="tag">collection</span>, <span class="tag">collectionView</span>) <span class="rules">{
Expand Down Expand Up @@ -189,18 +193,38 @@ <h2 id="view-events">View Events</h2>
</p>
<pre><code><span class="tag">Thorax</span><span class="class">.View</span><span class="class">.on</span>(<span class="rules">{
<span class="rule"><span class="attribute">collection</span>:<span class="value"> {
reset: <span class="function">function()</span> {
//<span class="string">"this"</span> will refer to the view
reset: <span class="function">function(collectionView)</span> {
//<span class="string">"this"</span> will refer to the view which called
//the collection helper
</span>}</span></span>
}
});</code></pre>
<p>The <code>collection</code> helper itself is implemented in this way.
<p>Each collection event callback is called with the generated collection view prepended to the arguments.

</p>
<h2 id="thorax-collectionview">Thorax.CollectionView</h2>
<p>A <code>Thorax.View</code> subclass generated each time a <code>collection</code> helper is used.
<p>A <code>CollectionView</code> class is automatically generated each time a <code>collection</code> helper is used. A CollectionView may also be created in JavaScript and appended as a child view with the <code>view</code> helper. The constructor will accept any options that the <code>collection</code> helper accepts, though any template or view names must be the actual names and not inline templates.

</p>
<pre><code>var parent = new Thorax<span class="preprocessor">.View</span>({
initialize: function() {
this<span class="preprocessor">.myCollectionView</span> = new Thorax<span class="preprocessor">.CollectionView</span>({
parent: this,
<span class="string">"item-template"</span>: <span class="string">"item-template-name"</span>
})<span class="comment">;</span>
child<span class="preprocessor">.setCollection</span>(myCollection)<span class="comment">;</span>
},
template: <span class="string">"{{view myCollectionView}}"</span>
})<span class="comment">;</span></code></pre>
<h3 id="thorax-collectionview/setcollection-view-setcollection-collection-options" class="signature">setCollection <em>view.setCollection(collection, options)</em></h3>
<p>If directly creating a CollectionView instance, the collection property may be set by passing <code>collection</code> to the constructor, or by calling this method. The following options may be passed when calling this method:

</p>
<ul>
<li><code>fetch</code>: wether or not to try to call <code>fetch</code> on the collection if <code>shouldFetch</code> returns true</li>
<li><code>success</code>: a callback to be called when the</li>
<li><code>errors</code>: wether or not to trigger an <code>error</code> event on the CollectionView and it's parent when an <code>error</code> event is triggered on the collection</li>
</ul>
<h3 id="thorax-collectionview/appenditem-view-appenditem-modelorview-index" class="signature">appendItem <em>view.appendItem(modelOrView [,index])</em></h3>
<p>Append a model (which will used to generate a new <code>item-view</code>) or a view at a given index in the <code>CollectionView</code>. If passing a view as the first argument <code>index</code> may be a model which will be used to look up the index.

Expand Down
135 changes: 84 additions & 51 deletions beta/index.html
View file
Expand Up @@ -156,23 +156,6 @@

</li>

<li>
<a href="#command-line">Command Line</a>

<ul>

<li>
<a href="#command-line/build-thorax-build-target-plugin-plugin">build </a>
</li>

<li>
<a href="#command-line/templates-thorax-templates-templates-templates-js">templates </a>
</li>

</ul>

</li>

<li>
<a href="#events">Events</a>

Expand Down Expand Up @@ -207,6 +190,36 @@

</li>

<li>
<a href="#command-line">Command Line</a>

<ul>

<li>
<a href="#command-line/build-thorax-build-target-plugin-plugin">build </a>
</li>

<li>
<a href="#command-line/templates-thorax-templates-templates-templates-js">templates </a>
</li>

</ul>

</li>

<li>
<a href="#error-handling">Error Handling</a>

<ul>

<li>
<a href="#error-handling/onexception-thorax-onexception-name-error">onException </a>
</li>

</ul>

</li>

</ul><div class="header"><a href="#">Plugins</a></div><ul class="sections"><li><a href="collection.html">Collection</a></li><li><a href="event.html">Event</a></li><li><a href="form.html">Form</a></li><li><a href="helpers.html">Helpers</a></li><li><a href="loading.html">Loading</a></li><li><a href="mobile.html">Mobile</a></li><li><a href="model.html">Model</a></li><li><a href="view-controller.html">ViewController</a></li></ul>


Expand Down Expand Up @@ -236,10 +249,10 @@ <h3>Rails</h3>
</td>
</tr>
<tr>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-html.zip" class="btn">Download 2.0.0b3</a></td>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-node.zip" class="btn btn-primary">Download 2.0.0b3</a></td>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-mobile.zip" class="btn">Download 2.0.0b3</a></td>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-rails.zip" class="btn">Download 2.0.0b3</a></td>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-html.zip" class="btn">Download 2.0.0b4</a></td>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-lumbar.zip" class="btn btn-primary">Download 2.0.0b4</a></td>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-mobile.zip" class="btn">Download 2.0.0b4</a></td>
<td width="25%"><a href="https://github.com/downloads/walmartlabs/thorax/thorax-rails.zip" class="btn">Download 2.0.0b4</a></td>
</tr>
</table>

Expand Down Expand Up @@ -368,6 +381,16 @@ <h3 id="view-helpers/template-template-name-options" class="signature">template

</p>
<pre><code>{{<span class="title">template</span> <span class="string">"path/to/template"</span> key=<span class="string">"value"</span>}}</code></pre>
<p>If a block is used, the template will have a variable named <code>yield</code> available that will contain the contents of the block.

</p>
<pre><code>{{#<span class="keyword">template</span> <span class="string">"child"</span>}}
content <span class="keyword">in</span> the block will be available <span class="keyword">in</span> a variable
named <span class="string">"yield"</span> inside the <span class="keyword">template</span> <span class="string">"child"</span>
{{/<span class="keyword">template</span>}}</code></pre>
<p>This is useful when a child template will be called from multiple different parents.

</p>
<h3 id="view-helpers/view-view-name-options" class="signature">view <em>{{view name [options]}}</em></h3>
<p>Embed one view in another. The first argument may be the name of a new view to initialize or a reference to a view that has already been initialized.

Expand Down Expand Up @@ -410,36 +433,6 @@ <h3 id="/view-event-target-view-options" class="signature">$.view <em>$(event.ta

</p>
<pre><code>$(event<span class="variable">.target</span>)<span class="variable">.view</span>()</code></pre>
<h2 id="command-line">Command Line</h2>
<p>To use the command line utilities:

</p>
<pre><code><span class="title">npm</span> install -g thorax</code></pre>
<h3 id="command-line/build-thorax-build-target-plugin-plugin" class="signature">build <em>thorax build target [plugin] [plugin...]</em></h3>
<p>Build a custom version of Thorax using a list of any of the given plugins:

</p>
<ul>
<li>mixin</li>
<li>event</li>
<li>model</li>
<li>collection</li>
<li>helpers</li>
<li>form</li>
<li>view-controller</li>
<li>loading</li>
<li>mobile</li>
</ul>
<p>Not specifying any plugins will build a version with all plugins except mobile. To build a version of Thorax with all plugins including the mobile plugin run:

</p>
<pre><code><span class="title">thorax</span> build ./thorax.js <span class="comment">--mobile</span></code></pre>
<h3 id="command-line/templates-thorax-templates-templates-templates-js" class="signature">templates <em>thorax templates ./templates ./templates.js</em></h3>
<p>If using Thorax outside of the provided node or Rails downloads you can inline a directory of templates into a single file by running the <code>thorax templates</code> command.

</p>
<pre><code><span class="title">npm</span> install -g thorax
<span class="title">thorax</span> templates ./templates-dir ./templates.js</code></pre>
<h2 id="events">Events</h2>
<h3 id="events/destroyed-destroyed" class="signature">destroyed <em>destroyed ()</em></h3>
<p>Triggered when the <code>destroy</code> method is called.
Expand Down Expand Up @@ -497,6 +490,46 @@ <h2 id="html-attributes">HTML Attributes</h2>
<pre><code>[<span class="typedef"><span class="keyword">data</span>-view-name="my-view-name"] <span class="container">{
<span class="title">border</span>: 1<span class="title">px</span> <span class="title">solid</span> #<span class="title">ccc</span>;
}</span></span></code></pre>
<h2 id="command-line">Command Line</h2>
<p>To use the command line utilities:

</p>
<pre><code><span class="title">npm</span> install -g thorax</code></pre>
<h3 id="command-line/build-thorax-build-target-plugin-plugin" class="signature">build <em>thorax build target [plugin] [plugin...]</em></h3>
<p>Build a custom version of Thorax using a list of any of the given plugins:

</p>
<ul>
<li>mixin</li>
<li>event</li>
<li>model</li>
<li>collection</li>
<li>helpers</li>
<li>form</li>
<li>view-controller</li>
<li>loading</li>
<li>mobile</li>
</ul>
<p>Not specifying any plugins will build a version with all plugins except mobile. To build a version of Thorax with all plugins including the mobile plugin run:

</p>
<pre><code><span class="title">thorax</span> build ./thorax-mobile.js <span class="comment">--mobile</span></code></pre>
<h3 id="command-line/templates-thorax-templates-templates-templates-js" class="signature">templates <em>thorax templates ./templates ./templates.js</em></h3>
<p>If using Thorax outside of the provided node or Rails downloads you can inline a directory of templates into a single file by running the <code>thorax templates</code> command.

</p>
<pre><code><span class="title">npm</span> install -g thorax
<span class="title">thorax</span> templates ./templates-dir ./templates.js</code></pre>
<h2 id="error-handling">Error Handling</h2>
<h3 id="error-handling/onexception-thorax-onexception-name-error" class="signature">onException <em>Thorax.onException(name, error)</em></h3>
<p>Bound DOM event handlers in Thorax are wrapped with a try / catch block, calling this function if an error is caught. This hook is provided primarily to allow for easier debugging in Android environments where it is difficult to determine the source of the error. The default error handler is simply:

</p>
<pre><code><span class="function"><span class="title">function</span><span class="params">(name, error)</span> {
<span class="title">throw</span> <span class="title">error</span>;
}</span></code></pre>
<p>Override this function with your own logging / debugging handler. <code>name</code> will be the event name where the error was thrown.
</p>

<p>Copyright 2012 <a href="http://walmartlabs.com">@WalmartLabs</a></p></div>
</div><a href="https://github.com/walmartlabs/thorax"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></body>
Expand Down

0 comments on commit 7d45bfe

Please sign in to comment.