Sign upLogin

Jellyvision/lateralus

View on GitHub
Star
docs/Lateralus.Component.View.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>View - 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">View</h1>
    

    




<section>

<header>
    
        <h2>
            <span class="ancestors"><a href="Lateralus.html">Lateralus</a><a href="Lateralus.Component.html">.Component</a>.</span>
        
        View
        </h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        
<div class="section-method">

    

    <h4 class="name" id="View"><span class="type-signature"></span>new View<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>This class builds on the ideas and APIs of
<a href="http://backbonejs.org/#View"><code>Backbone.View</code></a>.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line270">line 270</a>
    </li></ul></dd>
    

    

    

    
</dl>























</div>
    
    </div>

    
        <h3 class="subsection-title">Extends</h3>

        


    <ul>
        <li>Backbone.View</li>
    </ul>


    

    

    

     

    

    
        <h3 class="subsection-title">Members</h3>

        
            
<div class="section-members">
<h4 class="name" id="component"><span class="type-signature">(readonly) </span>component<span class="type-signature"> :<a href="Lateralus.Component.html">Lateralus.Component</a></span></h4>




<div class="description">
    <p>A reference to the <code><a href="Lateralus.Component.html"><code>Lateralus.Component</code></a></code> to which this <code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code> belongs.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line49">line 49</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>


        </li>
    </ul>





</div>

        
            
<div class="section-members">
<h4 class="name" id="components"><span class="type-signature"></span>components<span class="type-signature"> :Object.&lt;<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.&lt;<a href="Lateralus.Component.html">Lateralus.Component</a>></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.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line32">line 32</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="parentView"><span class="type-signature"></span>parentView<span class="type-signature"> :<a href="Lateralus.Component.View.html">Lateralus.Component.View</a>|null</span></h4>




<div class="description">
    <p>If this is a subview of another <code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code>, this
property is a reference to the parent <code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code>.</p>
</div>





    <h5 class="subsection-title">Properties:</h5>

    

<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>parentView</code></td>
            

            <td class="type">
            
            </td>

            

            

            <td class="description last"></td>
        </tr>

        

    
    </tbody>
</table>




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy">
            <li>null</li>
        </ul></dd>
    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line47">line 47</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>null</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="template"><span class="type-signature"></span>template<span class="type-signature"> :string|null</span></h4>




<div class="description">
    <p>The DOM template to be used with this View.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy">
            <li>{null}</li>
        </ul></dd>
    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line9">line 9</a>
    </li></ul></dd>
    

    

    

    
</dl>



    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>string</code></span>
|

<span class="param-type"><code>null</code></span>


        </li>
    </ul>





</div>

        
    

    
        <h3 class="subsection-title">Methods</h3>

        
            
<div class="section-method">

    

    <h4 class="name" id="addSubview"><span class="type-signature"></span>addSubview<span class="signature">(Subview, subviewOptions<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="Lateralus.Component.View.html">Lateralus.Component.View</a>}</span></h4>

    



<div class="description">
    <p>Adds a subview.  Subviews are lighter than subcomponents.  It is
preferable to use a subview rather than a subcomponent when there is clear
interdependency between two Views.  This pattern is useful when you want
to keep display logic well-organized into several Views, but have it
compartmentalized within a single component.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line136">line 136</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>Subview</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">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>A constructor, not an instance.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>subviewOptions</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object</code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Backbone.View <a href="http://backbonejs.org/#View-constructor">constructor
options</a> to pass along to the
subview when it is instantiated.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="Lateralus.Component.View.html">Lateralus.Component.View</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The instantiated subview.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id="deferredInitialize"><span class="type-signature"></span>deferredInitialize<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>A function to be called in the next JavaScript thread.  This can be
necessary for situations where setup logic needs to happen after a View
has been rendered.</p>
<p>In other words, <code><a href="Lateralus.Component.View.html#initialize"><code>Lateralus.Component.View#initialize</code></a></code> runs before
the View has been rendered to the DOM, and <code>deferredInitialize</code> runs
immediately after it has been rendered.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line110">line 110</a>
    </li></ul></dd>
    

    

    

    
</dl>























</div>
        
            
<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.View.html"><code>Lateralus.Component.View</code></a></code> from
the DOM and cleanly dispose of any references.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line251">line 251</a>
    </li></ul></dd>
    

    

    

    
</dl>























</div>
        
            
<div class="section-method">

    

    <h4 class="name" id="getTemplateRenderData"><span class="type-signature"></span>getTemplateRenderData<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>

    



<div class="description">
    <p>This method returns the object whose properties are used as render
variables in <code><a href="Lateralus.Component.View.html#renderTemplate"><code>Lateralus.Component.View#renderTemplate</code></a></code>.  The method
can be overridden.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line172">line 172</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 class="param-desc">
    <p>The <a href="http://backbonejs.org/#Model-toJSON">raw <code>Backbone.Model</code>
data</a>, if this View has a Model.
Otherwise, an empty object is returned.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id="initialize"><span class="type-signature"></span>initialize<span class="signature">(opts<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>This is called when a <code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code> is initialized, it
is not called directly.</p>
<p><code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code> subclasses that
override <code>initialize</code> must call this base method:</p>
<pre class="prettyprint source"><code>const Base = Lateralus.Component.View;
const baseProto = Base.prototype;

const ExtendedComponentView = Base.extend({
  initialize: function () {
    baseProto.initialize.apply(this, arguments);
    // Other logic...
  }
});</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line68">line 68</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>opts</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object</code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Any properties or methods to attach to this
<code><a href="Lateralus.Component.View.html"><code>Lateralus.Component.View</code></a></code> instance.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>
















</div>
        
            
<div class="section-method">

    

    <h4 class="name" id="renderTemplate"><span class="type-signature"></span>renderTemplate<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Meant to be called by <code><a href="Lateralus.Component.View.html#initialize"><code>Lateralus.Component.View#initialize</code></a></code> and
infrequently thereafter, this method empties out
<a href="http://backbonejs.org/#View-$el"><code>$el</code></a> and does a full re-render.
<a href="http://backbonejs.org/#View-render"><code>render</code></a> should only be used for
partial renders.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line211">line 211</a>
    </li></ul></dd>
    

    

    

    
</dl>























</div>
        
            
<div class="section-method">

    

    <h4 class="name" id="toString"><span class="type-signature"></span>toString<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span></h4>

    







<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="lateralus.component.view.js.html">lateralus.component.view.js</a>, <a href="lateralus.component.view.js.html#line278">line 278</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 View.  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>