docs/Lateralus.Component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Component - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Tutorials</li><li class="nav-item"><a href="tutorial-using-lateralus.html">Using Lateralus</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Lateralus.html">Lateralus</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#.beget">beget</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#.inherit">inherit</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#dispose">dispose</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#error">error</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#initRouter">initRouter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#log">log</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#shareWith">shareWith</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#toString">toString</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.html#warn">warn</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Lateralus.Component.html">Lateralus.Component</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.html#dispose">dispose</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.html#extend">extend</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.html#toJSON">toJSON</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.html#toString">toString</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Lateralus.Component.Collection.html">Lateralus.Component.Collection</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.Collection.html#remove">remove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.Collection.html#toString">toString</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Lateralus.Component.Model.html">Lateralus.Component.Model</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.Model.html#destroy">destroy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.Model.html#dispose">dispose</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.Model.html#toString">toString</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Lateralus.Component.View.html">Lateralus.Component.View</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.View.html#addSubview">addSubview</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.View.html#deferredInitialize">deferredInitialize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.View.html#dispose">dispose</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.View.html#getTemplateRenderData">getTemplateRenderData</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.View.html#initialize">initialize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.View.html#renderTemplate">renderTemplate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Component.View.html#toString">toString</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Lateralus.Model.html">Lateralus.Model</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Model.html#onChange">onChange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Model.html#toString">toString</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Lateralus.Router.html">Lateralus.Router</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.Router.html#toString">toString</a></span></li><li class="nav-heading">Mixins</li><li class="nav-heading"><span class="nav-item-type type-mixin">M</span><span class="nav-item-name"><a href="Lateralus.mixins.html">Lateralus.mixins</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#addComponent">addComponent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#amplify">amplify</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#collect">collect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#collectOne">collectOne</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#delegateLateralusEvents">delegateLateralusEvents</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#emit">emit</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#initCollection">initCollection</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#initModel">initModel</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#listenFor">listenFor</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Lateralus.mixins.html#mixin">mixin</a></span></li>
</nav>
<div id="main">
<h1 class="page-title">Component</h1>
<section>
<header>
<h2>
<span class="ancestors"><a href="Lateralus.html">Lateralus</a>.</span>
Component
</h2>
<div class="class-description"><p>Lateralus.Component</p></div>
</header>
<article>
<div class="container-overview">
<div class="section-method">
<h2>Constructor</h2>
<h4 class="name" id="Component"><span class="type-signature"></span>new Component<span class="signature">(lateralus, options, viewOptions, opt_parentComponent<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>The constructor for this method should not be called directly. Instead, use
the <code><a href="Lateralus.mixins.html#addComponent"><code>Lateralus.mixins#addComponent</code></a></code> mixin method:</p>
<pre class="prettyprint source"><code>const App = Lateralus.beget(function () {
Lateralus.apply(this, arguments);
});
const app = new App(document.getElementById('app'));
const component = app.addComponent(Lateralus.Component);
console.log(component instanceof Lateralus.Component); // true</code></pre>
</div>
<dl class="details">
<dt class="mixes">Mixes In:</dt>
<dd class="mixes"><ul>
<li><a href="http://backbonejs.org/#Events">http://backbonejs.org/#Events</a></li>
<li><a href="Lateralus.mixins.html">Lateralus.mixins</a></li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line40">line 40</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>lateralus</code></td>
<td class="type">
<span class="param-type"><code><a href="Lateralus.html">Lateralus</a></code></span>
</td>
<td class="attributes">
</td>
<td class="description last">
</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
</td>
<td class="description last">
<p>Values to attach to this <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code> instance. This object also get passed to the <code><code>Lateralus.Component.initialize</code></code> method, if one is defined.</p>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>modelAttributes</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">
<p>Any attributes to pre-populate
the <code><a href="Lateralus.Component.Model.html"><code>Lateralus.Component.Model</code></a></code>
instance with, if there is one.</p>
</td>
</tr>
<tr>
<td class="name"><code>modelOptions</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">
<p>Any parameters to pass to the
<code><a href="Lateralus.Component.Model.html"><code>Lateralus.Component.Model</code></a></code>
instance, if there is one.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>viewOptions</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
</td>
<td class="description last">
<p>The <code>options</code> Object to pass to the
<code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code>
constructor.</p>
</td>
</tr>
<tr>
<td class="name"><code>opt_parentComponent</code></td>
<td class="type">
<span class="param-type"><code><a href="Lateralus.Component.html">Lateralus.Component</a></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">
<p>The parent component of
this component, if any.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3 class="subsection-title">Classes</h3>
<dl>
<dt><a href="Lateralus.Component.Collection.html">Collection</a></dt>
<dd></dd>
<dt><a href="Lateralus.Component.Model.html">Model</a></dt>
<dd></dd>
<dt><a href="Lateralus.Component.View.html">View</a></dt>
<dd></dd>
</dl>
<h3 class="subsection-title">Members</h3>
<div class="section-members">
<h4 class="name" id="components"><span class="type-signature"></span>components<span class="type-signature"> :Object.<<a href="Lateralus.Component.html">Lateralus.Component</a>></span></h4>
<div class="description">
<p>The subcomponents belonging to this object. Do not modify this
property directly, it is managed by Lateralus.</p>
</div>
<dl class="details">
<dt class="mixes">Mixes In:</dt>
<dd class="mixes"><ul>
<li><a href="Lateralus.mixins.html#.components">Lateralus.mixins.components</a></li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.mixins.js.html">lateralus.mixins.js</a>, <a href="lateralus.mixins.js.html#line74">line 74</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code>Object.<<a href="Lateralus.Component.html">Lateralus.Component</a>></code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="initialize"><span class="type-signature"></span>initialize<span class="type-signature"> :function|undefined</span></h4>
<div class="description">
<p>A method to be called when this <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code> has been set
up.</p>
</div>
<dl class="details">
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy">
<li>undefined</li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line124">line 124</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code>function</code></span>
|
<span class="param-type"><code>undefined</code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="lateralus"><span class="type-signature">(readonly) </span>lateralus<span class="type-signature"> :<a href="Lateralus.html">Lateralus</a></span></h4>
<div class="description">
<p>A reference to the central <a href="Lateralus.html"><code>Lateralus</code></a> instance.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line42">line 42</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code><a href="Lateralus.html">Lateralus</a></code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="lateralusEvents"><span class="type-signature"></span>lateralusEvents<span class="type-signature"> :Object|undefined</span></h4>
<div class="description">
<p>A map of functions or string references to functions that will
handle <a href="http://backbonejs.org/#Events">events</a> dispatched to the
central <code><a href="Lateralus.html"><code>Lateralus</code></a></code> instance.</p>
<pre class="prettyprint source"><code>const ExtendedComponent = Lateralus.Component.extend({
name: 'extended',
lateralusEvents: {
anotherComponentChanged: 'onAnotherComponentChanged',
anotherComponentDestroyed: function () {
// ...
}
},
onAnotherComponentChanged: function () {
// ...
}
});</code></pre>
</div>
<dl class="details">
<dt class="mixes">Mixes In:</dt>
<dd class="mixes"><ul>
<li><a href="Lateralus.mixins.html#.lateralusEvents">Lateralus.mixins.lateralusEvents</a></li>
</ul></dd>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy">
<li>undefined</li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.mixins.js.html">lateralus.mixins.js</a>, <a href="lateralus.mixins.js.html#line255">line 255</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code>Object</code></span>
|
<span class="param-type"><code>undefined</code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="modelEvents"><span class="type-signature"></span>modelEvents<span class="type-signature"> :Object|undefined</span></h4>
<div class="description">
<p>A map of functions or string references to functions that will
handle <a href="http://backbonejs.org/#Events">events</a> emitted by
<code>this.model</code>.</p>
<pre class="prettyprint source"><code>const ExtendedComponent = Lateralus.View.extend({
modelEvents: {
changed:someProperty: function (model, someProperty) {
// ...
}
}
});</code></pre>
</div>
<dl class="details">
<dt class="mixes">Mixes In:</dt>
<dd class="mixes"><ul>
<li><a href="Lateralus.mixins.html#.modelEvents">Lateralus.mixins.modelEvents</a></li>
</ul></dd>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy">
<li>undefined</li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.mixins.js.html">lateralus.mixins.js</a>, <a href="lateralus.mixins.js.html#line317">line 317</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code>Object</code></span>
|
<span class="param-type"><code>undefined</code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="parentComponent"><span class="type-signature"></span>parentComponent<span class="type-signature"> :<a href="Lateralus.Component.html">Lateralus.Component</a>|undefined</span></h4>
<div class="description">
<p>If this is a subcomponent of another <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code>, this
property is a reference to the parent <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code>.</p>
</div>
<dl class="details">
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy">
<li>undefined</li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line64">line 64</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code><a href="Lateralus.Component.html">Lateralus.Component</a></code></span>
|
<span class="param-type"><code>undefined</code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="provide"><span class="type-signature"></span>provide<span class="type-signature"> :Object|undefined</span></h4>
<div class="description">
<p>A map of functions that will handle <code><a href="Lateralus.mixins.html#collect"><code>Lateralus.mixins#collect</code></a></code>
calls. Each of the functions attached to this Object should return a
value. These functions <strong>must</strong> be completely synchronous.</p>
<pre class="prettyprint source"><code>const App = Lateralus.beget(function () {
Lateralus.apply(this, arguments);
});
_.extend(App.prototype, {
provide: {
demoData: function () {
return 1;
}
}
});
const app = new App();
const ComponentSubclass = Lateralus.Component.extend({
name: 'provider',
provide: {
demoData: function () {
return 2;
}
}
});
app.addComponent(ComponentSubclass);
console.log(app.collect('demoData')); // [1, 2]</code></pre>
</div>
<dl class="details">
<dt class="mixes">Mixes In:</dt>
<dd class="mixes"><ul>
<li><a href="Lateralus.mixins.html#.provide">Lateralus.mixins.provide</a></li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.mixins.js.html">lateralus.mixins.js</a>, <a href="lateralus.mixins.js.html#line282">line 282</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code>Object</code></span>
|
<span class="param-type"><code>undefined</code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="view"><span class="type-signature"></span>view<span class="type-signature"> :<a href="Lateralus.Component.View.html">Lateralus.Component.View</a>|undefined</span></h4>
<div class="description">
<p>If <code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code> is defined, this is an instance of
that constructor.</p>
</div>
<dl class="details">
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy">
<li>undefined</li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line108">line 108</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code><a href="Lateralus.Component.View.html">Lateralus.Component.View</a></code></span>
|
<span class="param-type"><code>undefined</code></span>
</li>
</ul>
</div>
<div class="section-members">
<h4 class="name" id="View"><span class="type-signature"></span>View<span class="type-signature"> :<a href="Lateralus.Component.View.html">Lateralus.Component.View</a>|undefined</span></h4>
<div class="description">
<p>The <code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code> constructor to use, if any. If
this <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code> is intended to render to the DOM,
<code>View</code> should be defined on the <code>prototype</code> before instantiating:</p>
<pre class="prettyprint source"><code>const ExtendedComponent = Lateralus.Component.extend({
name: 'extended',
View: Lateralus.Component.View,
template: '<div></div>'
});</code></pre>
</div>
<dl class="details">
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy">
<li>undefined</li>
</ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line74">line 74</a>
</li></ul></dd>
</dl>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><code><a href="Lateralus.Component.View.html">Lateralus.Component.View</a></code></span>
|
<span class="param-type"><code>undefined</code></span>
</li>
</ul>
</div>
<h3 class="subsection-title">Methods</h3>
<div class="section-method">
<h4 class="name" id="dispose"><span class="type-signature"></span>dispose<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Remove this <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code> from memory. Also remove any
nested components added by <code><a href="Lateralus.mixins.html#addComponent"><code>Lateralus.mixins#addComponent</code></a></code>.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line193">line 193</a>
</li></ul></dd>
</dl>
</div>
<div class="section-method">
<h4 class="name" id="extend"><span class="type-signature"></span>extend<span class="signature">(protoProps)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Create a <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code> subclass.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line144">line 144</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>protoProps</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="description last">
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
</td>
<td class="description last">
<p>The name of this component. It should have
no whitespace.</p>
</td>
</tr>
<tr>
<td class="name"><code>View</code></td>
<td class="type">
<span class="param-type"><code><a href="Lateralus.Component.View.html">Lateralus.Component.View</a></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">
<p>The <code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code> to render this component with.</p>
</td>
</tr>
<tr>
<td class="name"><code>Model</code></td>
<td class="type">
<span class="param-type"><code><a href="Lateralus.Component.Model.html">Lateralus.Component.Model</a></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">
<p>The optional <code><a href="Lateralus.Component.Model.html"><code>Lateralus.Component.Model</code></a></code> to be provided to <code>protoProps.View</code> when it is
instantiated. This does nothing if <code>protoProps.View</code> is not defined.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-method">
<h4 class="name" id="toJSON"><span class="type-signature"></span>toJSON<span class="signature">()</span><span class="type-signature"> → {Object}</span></h4>
<div class="description">
<p>Meant to be overridden by subclasses.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line219">line 219</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
</div>
</div>
<div class="section-method">
<h4 class="name" id="toString"><span class="type-signature"></span>toString<span class="signature">()</span><span class="type-signature"> → {string}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="lateralus.component.js.html">lateralus.component.js</a>, <a href="lateralus.component.js.html#line228">line 228</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The name of this Component. This is used internally by
Lateralus.</p>
</div>
</div>
</div>
</article>
</section>
</div>
<br class="clear">
<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.3</a> on Thu Sep 07 2017 15:55:10 GMT-0500 (CDT) using the Minami theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>