docs/lateralus.component.view.js.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>lateralus.component.view.js - 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">lateralus.component.view.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import $ from 'jquery';
import _ from 'lodash-compat';
import Backbone from 'backbone';
import Mustache from 'mustache';
import mixins from './lateralus.mixins';
const fn = {};
/**
* The DOM template to be used with this View.
* @type {string|null}
* @member Lateralus.Component.View#template
* @default {null}
*/
fn.template = null;
// jshint maxlen:100
/**
* The constructor for this class should not be called by application code,
* it is used by the `{@link Lateralus.Component}`
* constructor.
* @private
* @param {Lateralus} lateralus
* @param {Lateralus.Component} component
* @param {Object} [options] Gets passed to
* [Backbone.View#initialize](http://backbonejs.org/#Collection-constructor).
* @param {Lateralus.Component.View} [opt_parentView]
* @mixes Lateralus.mixins
* @constructs Lateralus.Component.View
*/
fn.constructor = function (lateralus, component, options, opt_parentView) {
/**
* A reference to the central {@link Lateralus} instance.
* @member Lateralus.Component.View#lateralus
* @type {Lateralus}
* @final
*/
this.lateralus = lateralus;
/**
* If this is a subview of another `{@link Lateralus.Component.View}`, this
* property is a reference to the parent `{@link Lateralus.Component.View}`.
* @property parentView
* @type {Lateralus.Component.View|null}
* @default null
*/
this.parentView = opt_parentView || null;
/**
* A reference to the `{@link Lateralus.Component}` to which this `{@link
* Lateralus.Component.View}` belongs.
* @member Lateralus.Component.View#component
* @type {Lateralus.Component}
* @final
*/
this.component = component;
if (options.model) {
// Attach the model a bit early here so that the modelEvents map is
// properly bound in the delegateLateralusEvents call below.
this.model = options.model;
}
this.delegateLateralusEvents();
Backbone.View.call(this, options);
};
/**
* This is called when a `{@link Lateralus.Component.View}` is initialized, it
* is not called directly.
*
* `{@link Lateralus.Component.View}` subclasses that
* override `initialize` must call this base method:
*
* const Base = Lateralus.Component.View;
* const baseProto = Base.prototype;
*
* const ExtendedComponentView = Base.extend({
* initialize: function () {
* baseProto.initialize.apply(this, arguments);
* // Other logic...
* }
* });
* @method Lateralus.Component.View#initialize
* @param {Object} [opts] Any properties or methods to attach to this
* `{@link Lateralus.Component.View}` instance.
*/
fn.initialize = function (opts) {
// this.toString references the central Component constructor, so don't
// attach the class for it here.
if (!this.parentView) {
this.$el.addClass(this.toString());
}
/**
* The CSS class names specified by this property will be attached to `$el`
* when this `{@link Lateralus.Component.View}` is
* initialized.
* @property className
* @type {string|undefined}
* @default undefined
*/
if (this.className) {
this.$el.addClass(this.className);
}
_.extend(this, _.defaults(_.clone(opts), this.attachDefaultOptions));
this.renderTemplate();
/**
* 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.
*
* In other words, `{@link Lateralus.Component.View#initialize}` runs before
* the View has been rendered to the DOM, and `deferredInitialize` runs
* immediately after it has been rendered.
* @method Lateralus.Component.View#deferredInitialize
*/
if (this.deferredInitialize) {
_.defer(_.bind(this.deferredInitialize, this));
}
};
/**
* Meant to be overridden in subclasses. With `attachDefaultOptions`, you
* can provide an object of default parameters that should be attached to the
* View instance when the base `initialize` method is called. These values
* can be overridden by the [`options` values that are provided to the View
* constructor](http://backbonejs.org/#View-constructor).
* @property attachDefaultOptions
* @type {Object}
*/
fn.attachDefaultOptions = {};
/**
* 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.
* @method Lateralus.Component.View#addSubview
* @param {Lateralus.Component.View} Subview A constructor, not an instance.
* @param {Object} [subviewOptions] Backbone.View [constructor
* options](http://backbonejs.org/#View-constructor) to pass along to the
* subview when it is instantiated.
* @return {Lateralus.Component.View} The instantiated subview.
*/
fn.addSubview = function (Subview, subviewOptions) {
if (!this.subviews) {
/**
* The subviews of this object. Do not modify this property directly, it
* is managed by Lateralus.
* @property subviews
* @type {Array(Lateralus.Component.View)}
*/
this.subviews = [];
}
const subview = new Subview(
this.lateralus,
this.component,
subviewOptions,
this
);
this.subviews.push(subview);
return subview;
};
/**
* This method returns the object whose properties are used as render
* variables in `{@link Lateralus.Component.View#renderTemplate}`. The method
* can be overridden.
* @method Lateralus.Component.View#getTemplateRenderData
* @return {Object} The [raw `Backbone.Model`
* data](http://backbonejs.org/#Model-toJSON), if this View has a Model.
* Otherwise, an empty object is returned.
*/
fn.getTemplateRenderData = function () {
const renderData = {};
if (this.model) {
_.extend(renderData, this.model.toJSON());
}
_.extend(renderData, this.lateralus.globalRenderData);
return renderData;
};
fn.getTemplatePartials = function () {
/**
* An optional map of template partials to be passed to the
* `Mustache.render` call for this View.
*
* Lateralus.Component.View.extend({
* templatePartials: {
* myNamePartial: 'Hello my name is {{name}}.'
* }
* });
*
* @property templatePartials
* @type {Object<String>|undefined}
* @default undefined
*/
return _.extend(this.templatePartials || {}, this.lateralus.globalPartials);
};
/**
* Meant to be called by `{@link Lateralus.Component.View#initialize}` and
* infrequently thereafter, this method empties out
* [`$el`](http://backbonejs.org/#View-$el) and does a full re-render.
* [`render`](http://backbonejs.org/#View-render) should only be used for
* partial renders.
* @method Lateralus.Component.View#renderTemplate
*/
fn.renderTemplate = function () {
if (!this.template) {
return;
}
this.$el.children().remove();
this.$el.html(
Mustache.render(
this.template,
this.getTemplateRenderData(),
this.getTemplatePartials()
)
);
this.bindToDOM();
};
/**
* Look for any DOM elements within [`$el`](http://backbonejs.org/#View-$el)
* that have a class that looks like _`$this`_ and create a property on this
* instance with the same name. The attached property is a jQuery object
* that references the corresponding DOM element.
* @method Lateralus.Component.View#bindToDOM
* @private
*/
fn.bindToDOM = function () {
this.$el.find('[class^="$"]').each((i, el) => {
const $el = $(el);
this[$el.attr('class').split(/\s+/)[0]] = $el;
});
};
/**
* Remove this `{@link Lateralus.Component.View}` from
* the DOM and cleanly dispose of any references.
* @method Lateralus.Component.View#dispose
* @chainable
*/
fn.dispose = function () {
this.remove();
const parentView = this.parentView;
if (parentView) {
parentView.subviews = _.without(parentView.subviews, this);
}
return this;
};
_.extend(fn, mixins);
/**
* This class builds on the ideas and APIs of
* [`Backbone.View`](http://backbonejs.org/#View).
* @class Lateralus.Component.View
* @extends {Backbone.View}
*/
const ComponentView = Backbone.View.extend(fn);
/**
* @method Lateralus.Component.View#toString
* @return {string} The name of this View. This is used internally by
* Lateralus.
*/
ComponentView.prototype.toString = function () {
return this.component.toString() + '-view';
};
export default ComponentView;
</code></pre>
</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>