peterblazejewicz/gist:9757192256b744e5fc15

## gistfile1.html

<!DOCTYPE html><html lang="en"><head><!--.
            .---._-------------------------------------+
___________/ ._____)                                   |
              ) __|   HEY HACKER! MARIONETTE IS        |
                __|   EVEN COOLER WHEN YOU USE THE     |
..---------.._____|   INSPECTOR. http://goo.gl/Wo3pju  |
                  +------------------------------------+
.--><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Marionette.js – The Backbone Framework</title><meta content="A scalable and composite application architecture." name="description"><meta name="viewport" content="width=device-width"><meta name="twitter:card" value="The Backbone Framework"><meta name="twitter:site" value="@marionettejs"><meta property="og:site_name" content="Marionette.js"><meta property="og:image" content="images/marionette_logo.png"><meta property="og:url" content="http://marionettejs.com"><meta property="og:description" content="Marionette simplifies your Backbone application code with robust views and architecture solutions."><meta property="og:title" content="The Backbone Framework"><link rel="stylesheet" href="styles/marionette.css?t=1420897645788"><link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"><link rel="apple-touch-icon" href="images/apple-touch-icon.png"><link href="http://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css"></head><body><div style="display:none"><svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="-0.201 -0.625 16.402 16" id="github-mark"><title>github-mark</title><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M8-.625c-4.528 0-8.2 3.67-8.2 8.203 0 3.623 2.35 6.696 5.61 7.782.41.075.558-.176.558-.396 0-.194-.007-.71-.01-1.396-2.282.497-2.764-1.098-2.764-1.098-.373-.948-.91-1.2-.91-1.2-.746-.507.057-.498.057-.498.825.06 1.256.846 1.256.846.732 1.253 1.92.893 2.388.68.073-.53.286-.89.52-1.097C4.684 11 2.77 10.294 2.77 7.15c0-.894.318-1.627.843-2.2-.084-.208-.366-1.042.08-2.17 0 0 .69-.22 2.256.84.653-.18 1.355-.272 2.053-.275.695.003 1.397.095 2.054.276 1.563-1.063 2.25-.843 2.25-.843.45 1.13.167 1.964.082 2.17.524.574.843 1.307.843 2.2 0 3.154-1.92 3.848-3.744 4.05.293.253.555.75.555 1.52 0 1.094-.01 1.98-.01 2.248 0 .222.148.476.562.396 3.257-1.085 5.604-4.158 5.604-7.78 0-4.533-3.67-8.205-8.2-8.205z"/></symbol><symbol viewBox="0 0 576 576" id="github-square"><title>github-square</title><path fill="currentColor" d="M139.542 433.5c-1.89 2.125-4.25 1.77-7.084-1.063-3.07-2.596-3.54-4.84-1.416-6.73 1.888-2.124 4.25-1.77 7.083 1.064 2.833 2.6 3.305 4.845 1.417 6.73zm-14.875-21.604c2.125 2.833 2.125 5.076 0 6.73-1.89 1.416-3.896.59-6.02-2.48-2.126-3.07-2.126-5.195 0-6.375 2.124-1.65 4.13-.94 6.02 2.13zm-21.605-21.25c-1.18 1.653-2.715 1.888-4.604.708-2.36-1.18-3.187-2.597-2.48-4.25.71-1.18 2.244-1.416 4.605-.708 2.362 1.18 3.188 2.597 2.48 4.25zm10.98 12.04c-1.417 1.655-3.305 1.3-5.667-1.06-2.125-2.598-2.362-4.488-.708-5.668 1.416-1.416 3.305-1.062 5.666 1.063 2.125 2.6 2.362 4.49.71 5.67zm45.687 39.668c-.95 2.834-3.19 3.542-6.73 2.125-4.016-.95-5.55-2.72-4.607-5.316.945-2.597 3.187-3.424 6.73-2.48 3.777 1.18 5.31 3.07 4.603 5.667zm22.31 1.77c0 2.598-1.89 3.897-5.668 3.897-4.013.476-6.02-.822-6.02-3.892 0-2.597 1.888-3.896 5.666-3.896 4.013-.472 6.02.826 6.02 3.896zm20.54-3.54c.472 2.36-1.18 4.013-4.958 4.958-3.778.945-5.903 0-6.375-2.834-.473-2.833 1.18-4.604 4.957-5.312 3.78-.472 5.904.59 6.375 3.187zM544 102v340c0 28.097-9.976 52.122-29.927 72.073C494.123 534.023 470.097 544 442 544h-79.333c-3.78 0-6.67-.118-8.677-.354-2.008-.237-4.31-.826-6.907-1.77-2.596-.946-4.486-2.657-5.666-5.136-1.18-2.48-1.77-5.727-1.77-9.74v-84.646c0-22.903-6.14-39.666-18.418-50.29 13.454-1.418 25.56-3.543 36.3-6.377 10.74-2.833 21.84-7.437 33.29-13.812 11.45-6.375 21.013-14.226 28.687-23.552 7.674-9.326 13.93-21.722 18.77-37.188 4.84-15.465 7.26-33.232 7.26-53.302 0-28.57-9.325-52.888-27.98-72.958 8.738-21.487 7.793-45.57-2.832-72.25-6.612-2.125-16.175-.826-28.688 3.896-12.514 4.726-23.375 9.92-32.584 15.587l-13.458 8.5c-21.958-6.138-44.625-9.208-68-9.208s-46.042 3.07-68 9.207c-3.778-2.597-8.795-5.784-15.052-9.562-6.258-3.78-16.115-8.323-29.573-13.636-13.457-5.313-23.61-6.907-30.457-4.78-10.39 26.68-11.216 50.76-2.48 72.25-18.653 20.07-27.98 44.386-27.98 72.956 0 20.07 2.42 37.78 7.262 53.125 4.84 15.347 11.037 27.743 18.593 37.188 7.555 9.445 17.06 17.354 28.51 23.73 11.45 6.374 22.55 10.978 33.292 13.812 10.742 2.83 22.843 4.956 36.302 6.373-9.445 8.5-15.23 20.66-17.355 36.48-4.96 2.36-10.27 4.13-15.938 5.31-5.67 1.18-12.398 1.772-20.19 1.772-7.79 0-15.523-2.54-23.197-7.615-7.675-5.074-14.227-12.454-19.657-22.134-4.486-7.555-10.21-13.695-17.177-18.417-6.967-4.72-12.81-7.558-17.53-8.5l-7.085-1.065c-4.96 0-8.384.53-10.27 1.594-1.89 1.062-2.48 2.42-1.773 4.072.708 1.654 1.77 3.306 3.188 4.96 1.417 1.652 2.95 3.07 4.605 4.25l2.48 1.77c5.193 2.36 10.33 6.846 15.404 13.458 5.074 6.614 8.793 12.634 11.154 18.065l3.542 8.145c3.07 8.97 8.263 16.23 15.583 21.78 7.32 5.55 15.23 9.09 23.73 10.626 8.5 1.534 16.704 2.36 24.613 2.48 7.91.116 14.46-.296 19.655-1.24l8.145-1.418c0 8.972.06 21.133.178 36.48.12 15.346.18 23.375.18 24.083 0 5.198-1.3 9.15-3.895 11.868-2.596 2.715-5.194 4.25-7.79 4.604-2.597.354-6.493.53-11.688.53H102c-28.097 0-52.122-9.975-72.073-29.926C9.977 494.124 0 470.096 0 442V102c0-28.097 9.976-52.122 29.927-72.073C49.877 9.977 73.903 0 102 0h340c28.097 0 52.122 9.976 72.073 29.927C534.023 49.877 544 73.903 544 102z"/></symbol><symbol viewBox="0 0 576 576" id="gitter-square"><title>gitter-square</title><path fill="currentColor" d="M514.108 29.892C494.133 9.917 470.05 0 442 0H102C73.95 0 49.867 9.917 29.892 29.892S0 73.95 0 102v340c0 28.05 9.917 52.133 29.892 72.108S73.95 544 102 544h340c28.05 0 52.133-9.917 72.108-29.892S544 470.192 544 442V102c0-28.05-9.917-52.133-29.892-72.108zM192 342h-32V114h32v228zm64 85h-32V160h32v267zm64 2h-32V160h32v269zm64-98h-32V160h32v171z"/></symbol><symbol viewBox="35.696 21.444 31.199 26" id="hamburger"><title>hamburger</title><g fill="#fff"><path d="M38.296 26.645h26c1.437 0 2.6-1.164 2.6-2.6 0-1.436-1.163-2.6-2.6-2.6h-26c-1.436 0-2.6 1.165-2.6 2.6s1.164 2.6 2.6 2.6zM64.296 31.844h-26c-1.436 0-2.6 1.165-2.6 2.6 0 1.437 1.164 2.6 2.6 2.6h26c1.437 0 2.6-1.164 2.6-2.6 0-1.435-1.164-2.6-2.6-2.6zM64.296 42.245h-26c-1.436 0-2.6 1.164-2.6 2.6 0 1.437 1.164 2.6 2.6 2.6h26c1.437 0 2.6-1.164 2.6-2.6 0-1.437-1.164-2.6-2.6-2.6z"/></g></symbol><symbol id="play"><title>play</title><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M84.15 26.4v6.35c0 2.833-.15 5.967-.45 9.4-.133 1.7-.267 3.117-.4 4.25l-.15.95c-.167.767-.367 1.517-.6 2.25-.667 2.367-1.533 4.083-2.6 5.15-1.367 1.4-2.967 2.383-4.8 2.95-.633.2-1.316.333-2.05.4-.767.1-1.3.167-1.6.2-4.9.367-11.283.617-19.15.75l-7.35.1h-2.95c-3.633-.033-7.55-.083-11.75-.15-8.433-.167-14.05-.383-16.85-.65-.067-.033-.667-.117-1.8-.25-.9-.133-1.683-.283-2.35-.45-2.066-.533-3.783-1.5-5.15-2.9-1.033-1.067-1.9-2.783-2.6-5.15-.233-.733-.417-1.483-.55-2.25l-.2-.95c-.133-1.133-.267-2.55-.4-4.25-.267-3.433-.4-6.567-.4-9.4V26.4c0-2.833.133-5.95.4-9.35l.4-4.25c.167-.966.417-2.05.75-3.25.7-2.333 1.567-4.033 2.6-5.1 1.367-1.434 2.967-2.434 4.8-3 .633-.167 1.333-.3 2.1-.4.4-.066.917-.133 1.55-.2C17.5.517 23.883.283 31.75.15c3.9-.1 7.333-.15 10.3-.15L45 .05c2.467 0 4.933.034 7.4.1 7.833.133 14.2.367 19.1.7.3.033.833.1 1.6.2.733.1 1.417.233 2.05.4 1.833.566 3.434 1.566 4.8 3 1.066 1.066 1.933 2.767 2.6 5.1.367 1.2.617 2.284.75 3.25l.4 4.25c.3 3.4.45 6.517.45 9.35zm-50.85 15L56 29.6 33.3 17.75V41.4z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M33.3 41.4V17.75L56 29.6z"/></symbol><symbol viewBox="0 0 576 576" id="twitter-square"><title>twitter-square</title><path fill="currentColor" d="M452.102 170.245c-13.14 5.933-27.41 9.89-42.667 12.01 15.965-9.467 26.984-23.17 32.777-41.256-15.258 8.9-31.08 14.973-47.33 18.08-14.41-15.54-32.353-23.31-53.97-23.31-20.485 0-38.003 7.206-52.414 21.757-14.41 14.552-21.758 31.93-21.758 52.416 0 6.78.566 12.432 1.696 16.953-30.376-1.696-58.915-9.326-85.476-22.89-26.56-13.56-49.166-31.928-67.815-54.816-6.78 11.73-10.173 24.3-10.173 37.44 0 26.846 10.738 47.47 32.212 61.88-11.02-.28-22.887-3.25-35.32-9.18v.706c0 17.66 5.934 33.343 17.66 47.19 11.727 13.844 26.28 22.32 43.516 25.57-6.783 1.837-12.858 2.826-18.085 2.826-3.108 0-7.63-.423-13.846-1.41 4.942 14.833 13.7 27.124 26.275 36.73 12.574 9.61 26.844 14.554 42.95 14.836-27.267 21.19-58.068 31.788-92.116 31.788-6.075 0-12.01-.283-17.66-1.13 34.755 22.04 72.62 33.06 113.59 33.06 26.42 0 51.144-4.24 74.173-12.575 23.03-8.335 42.81-19.496 59.34-33.623 16.53-14.13 30.657-30.095 42.525-48.32 11.865-18.225 20.766-37.298 26.56-57.22 5.79-19.92 8.62-39.7 8.62-59.48 0-4.238-.145-7.346-.286-9.606 14.694-10.596 27.126-23.312 37.016-38.43zm90.42-68.522V440.8c0 27.974-9.89 51.992-29.81 71.913-19.92 19.92-43.938 29.81-71.913 29.81H101.72c-27.974 0-51.99-9.89-71.913-29.81C9.89 492.793 0 468.773 0 440.8V101.723C0 73.75 9.89 49.733 29.81 29.81 49.732 9.89 73.75 0 101.723 0H440.8c27.974 0 51.992 9.89 71.912 29.81 19.92 19.922 29.81 43.94 29.81 71.913z"/></symbol><symbol viewBox="0 0 16 14" id="twitter"><title>twitter</title><path fill="currentColor" d="M16 1.657c-.59.28-1.223.47-1.885.557.677-.437 1.196-1.13 1.44-1.956-.633.406-1.337.7-2.083.86C12.874.428 12.022 0 11.078 0 9.264 0 7.794 1.582 7.794 3.536c0 .275.03.544.085.805C5.15 4.19 2.73 2.787 1.113.648.832 1.167.67 1.777.67 2.423c0 1.226.58 2.31 1.46 2.942-.54-.018-1.045-.178-1.487-.442v.046c0 1.71 1.13 3.14 2.633 3.463-.275.082-.566.125-.864.125-.212 0-.417-.023-.616-.064.416 1.403 1.628 2.426 3.065 2.453-1.12.946-2.534 1.512-4.073 1.512-.265 0-.525-.018-.783-.05 1.455 1 3.18 1.587 5.032 1.587 6.038 0 9.34-5.385 9.34-10.056 0-.15-.004-.304-.01-.456.64-.498 1.197-1.12 1.638-1.83H16z"/></symbol></svg></div><div class="global-nav"><section class="column-contain"><div class="left logo">Marionette</div><div class="menu-icon"><svg width="33px" height="24px"><use xlink:href="#hamburger"></use></svg></div><ul class="right nav-slider closed"><li class="left"><a href="docs/current">Docs</a><span class="middot">·</span></li><li class="left"><a href="annotated-src/backbone.marionette.html">Annotated Source</a><span class="middot">·</span></li><li class="left"><a href="https://gitter.im/marionettejs/backbone.marionette" target="_blank">Support</a><span class="middot">·</span></li><li class="left"><a href="http://blog.marionettejs.com">Blog</a><span class="middot">·</span></li><li class="left"><a href="https://twitter.com/marionettejs" target="_blank" class="twitter"><svg width="18" height="16" class="support-link-icon"><use xlink:href="#twitter"></use></svg></a><span class="middot">·</span></li><li class="left"><a href="https://github.com/marionettejs/backbone.marionette" target="_blank" class="github-mark"><svg width="19px" height="19px"><use xlink:href="#github-mark"></use></svg></a></li><div class="clear"></div></ul><div class="clear"></div></section></div><div class="masthead"><div class="wrapper"><div class="left"><img src="images/marionette.svg" alt="Marionette.js – A scalable and composite application architecture for Backbone.js" class="primary-logo"></div><div class="right"><h1>The Backbone Framework</h1><h2>Marionette simplifies your Backbone application code with robust views and architecture solutions.</h2><a href="#download" class="btn download-button">Download&nbsp;<span>v2.3.0</span></a><a href="/docs/current" class="btn download-button view-docs">View Docs</a></div></div></div><section class="about column-contain"><article class="left"><header><h2>About Marionette</h2></header><p>Marionette is a composite application library for Backbone that aims to simplify the construction of large scale JavaScript applications.</p><p>It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.</p></article><div class="quick-links right"><nav class="bottom-quick-links"><h3>Requirements</h3><ul><li><a href="http://jquery.com/" target="_blank">jQuery&nbsp;</a><span>v1.8+</span></li><li><a href="http://underscorejs.org/" target="_blank">Underscore&nbsp;</a><span>v1.4.4+</span></li><li><a href="http://backbonejs.org/" target="_blank">Backbone&nbsp;</a><span>v1.1.x<p class="note">is preferred. v1.0.0, v0.9.9 and v0.9.10 should work still.</p></span></li><li><a href="https://github.com/marionettejs/backbone.wreqr" target="_blank">Backbone.Wreqr</a></li><li><a href="https://github.com/marionettejs/backbone.babysitter" target="_blank">Backbone.BabySitter</a></li></ul></nav></div><div class="cl"></div></section><section id="download" class="column-contain hidden-xs"><div class="section-header"><h2 class="left">Downloads and Docs</h2><small class="right">&nbsp;v2.3.0<span class="middot">·</span><a href="https://github.com/marionettejs/backbone.marionette/blob/master/upgradeGuide.md">Upgrade Guide</a><span class="middot">·</span><a href="https://github.com/marionettejs/backbone.marionette/blob/master/changelog.md">Changelog</a></small><div class="cl"></div></div><div class="bower-install"><h2>With Bower</h2><p class="code-wrap">bower install marionette</p></div><div><h2>With npm</h2><p class="code-wrap">npm i backbone.marionette</p></div><div class="download-group"><h2>Pre-Packaged</h2><p>These archives contain all of the files you need to get started with Marionette, including Backbone, jQuery and all other prerequisites.</p><p>These packages include the standard UMD version of both the non-minified and minified versions of Marionette.</p><h3>*nix (.tar.gz)</h3><p><a href="downloads/backbone.marionette.tar.gz">backbone.marionette.tar.gz</a></p><h3>Windows (.zip)</h3><p><a href="downloads/backbone.marionette.zip">backbone.marionette.zip</a></p></div><div class="download-group"><h2>Bundled (UMD)</h2><p>Download the bundled backbone.marionette.js file with the Backbone.Wreqr and Backbone.BabySitter prerequisites built in.</p><div class="gw"><ul class="g"><li><a href="downloads/backbone.marionette.js">backbone.marionette.js</a></li><li><a href="downloads/backbone.marionette.min.js">backbone.marionette.min.js</a></li></ul></div></div><div class="download-group"><h2>Core</h2><p>Download the core backbone.marionette.js file, without Backbone.BabySitter or Backbone.Wreqr.</p><p>These pre-requisites are still required for Marionette to run, but this allows you to download them separately and update them independently.</p><h3>Standard .js (UMD)</h3><div class="gw"><ul class="g"><li><a href="downloads/core/backbone.marionette.js">backbone.marionette.js</a></li><li><a href="downloads/core/backbone.marionette.min.js">backbone.marionette.min.js</a></li></ul></div></div><div class="cl"></div></section><section class="code-samples column-contain hidden-xs"><div class="code-sample-block first-sample-block"><h4 class="code-header">Define view classes</h4><pre class="prettyprint"><code>var SingleLink = Marionette.ItemView.extend({
  tagName: "li",
  template: _.template("&lt;a href='<%-path%>'><%-path%>&lt;/a>")
});

var ListView = Marionette.CollectionView.extend({
  tagName: 'ul',
  childView: SingleLink
});
</code></pre></div><div class="code-sample-block second-sample-block"><h4 class="code-header">Pass in data</h4><pre class="prettyprint"><code>var list = new Backbone.Collection([
  {path: 'http://google.com'},
  {path: 'http://mojotech.com'},
]);

(new ListView({
  collection: list,
  el: '.link-area'
})).render();
</code></pre></div><div class="code-sample-block code-results-block"><h4 class="code-header code-header-results">Results</h4><div class="result"><ul><li><a href="http://google.com" target="_blank">http://google.com</a></li><li><a href="http://mojotech.com" target="_blank">http://mojotech.com</a></li></ul></div><div class="cl"></div></div><div class="cl"></div></section><section class="screencasts column-contain"><h2>Screencasts</h2><ul><li><a href="http://www.pluralsight.com/courses/marionette-fundamentals" target="_blank" class="link"><img src="images/screenshots/pluralsight.png" alt="pluralsight" class="screencast-thumb left"></a><div class="copy right"><a href="http://www.pluralsight.com/courses/marionette-fundamentals" target="_blank" class="link">Marionette Fundamentals by Pluralsight</a><p class="description">This paid course provides an in-depth look at Marionette with four hours of quality content. It is one of the more recently released screencasts.</p></div></li><li><a href="http://BackboneRails.com" target="_blank" class="link"><img src="images/screenshots/backbonerails.png" alt="backbone rails" class="screencast-thumb left"></a><div class="copy right"><a href="http://BackboneRails.com" target="_blank" class="link">BackboneRails</a><p class="description">Brian Mann has produced a comprehensive set of screencasts that cover just about everything you need to know to build large-scale Backbone applications on top of Ruby on Rails using CoffeeScript. Even if you are not using Ruby on Rails or CoffeeScript, the concepts are still helpful.<span>Some syntax might be outdated, so be sure to check against the docs.</span></p></div></li><li><a href="https://code.tutsplus.com/courses/advanced-backbone-patterns-and-techniques" target="_blank" class="link"><img src="images/screenshots/introductiontomarionette.png" alt="introduction to marionette" class="screencast-thumb left"></a><div class="copy right"><a href="https://code.tutsplus.com/courses/advanced-backbone-patterns-and-techniques" target="_blank" class="link">Tuts+ Introduction to Marionette</a><p class="description">Tuts+ Premium has a good paid series on “Advanced Backbone Patterns and Techniques“ with a free 10-minute episode that introduces Marionette. This episode focuses on bringing the most value to your Backbone app, quickly, by looking at the various views that Marionette provides along with regions to display the views in the DOM. It'll give you an idea of what Marionette can do for your app without getting too in-depth.<span>Some syntax might be outdated, so be sure to check against the docs.</span></p></div></li></ul></section><section class="featured_videos column-contain"><h2>Videos</h2><div class="video_slideshow_scroller"><div class="prev"><span><i class="fa fa-angle-left"></i></span></div><div class="next"><span><i class="fa fa-angle-right"></i></span></div><div data-cycle-slides=".video_slide" class="video_slideshow"><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/EvQnntaqVdE.jpg)" data-vid-id="EvQnntaqVdE" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Marionette - The Backbone Framework</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/7yZKsgKxziw.jpg)" data-vid-id="7yZKsgKxziw" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Marionette 101</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/CTr-tTwRH3o.jpg)" data-vid-id="CTr-tTwRH3o" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Nesting Your Views in Marionette</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/6wvAswHkarE.jpg)" data-vid-id="6wvAswHkarE" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Marionette Behaviors</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/2b1G3TdlQEU.jpg)" data-vid-id="2b1G3TdlQEU" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Backbone.Wreqr</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/jbGm3mJXh_s.jpg)" data-vid-id="jbGm3mJXh_s" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Backbone Under the Magnifying Glass (<a href="https://chrome.google.com/webstore/detail/marionette-inspector/fbgfjlockdhidoaempmjcddibjklhpka?hl=en" target="_blank">Marionette Inspector</a>)</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/75d0odmbu38.jpg)" data-vid-id="75d0odmbu38" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Using DevTools for Marionette Debugging</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/qWr7x9wk6_c.jpg)" data-vid-id="qWr7x9wk6_c" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Brian Mann talks about building applications with Marionette</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/0o2whtCJw8I.jpg)" data-vid-id="0o2whtCJw8I" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>Unsuck Your Backbone</p></figure></div><div class="video_slide"><figure class="vid"><div style="background-image:url(images/youtube/VERQEr-bVTs.jpg)" data-vid-id="VERQEr-bVTs" class="vid-player"><svg class="youtube-play"><use xlink:href="#play"></use></svg></div><p>From jQuery to Backbone/Marionette</p></figure></div></div></div><div class="cl"></div></section><section class="books column-contain"><h2>Books</h2><div class="book-list"><a href="https://shop.smashingmagazine.com/better-backbone-applications-with-marionettejs.html" target="_blank"><img src="images/books/better-bb-apps.png" alt="Better Backbone Applications with MarionetteJS"></a><a href="https://leanpub.com/marionette-gentle-introduction?utm_campaign=marionette-gentle-introduction&amp;utm_medium=embed&amp;utm_source=marionettejs.com" target="_blank"><img src="images/books/gentle-intro.png" alt="Backbone.Marionette.js: A Gentle Introduction"></a><a href="https://leanpub.com/structuring-backbone-with-requirejs-and-marionette?utm_campaign=structuring-backbone-with-requirejs-and-marionette&amp;utm_medium=embed&amp;utm_source=marionettejs.com" target="_blank"><img src="images/books/requirejs.png" alt="Structuring Backbone Code with RequireJS and Marionette Modules"></a><a href="https://leanpub.com/marionette-serious-progression?utm_campaign=marionette-serious-progression&amp;utm_medium=embed&amp;utm_source=marionettejs.com" target="_blank"><img src="images/books/serious-progression.png" alt="Backbone.Marionette.js: A Serious Progression"></a><a href="http://www.amazon.com/Getting-Backbone-Marionette-Raymundo-Armendariz/dp/1783284250/ref=tmm_pap_title_0?ie=UTF8&amp;qid=1420202176&amp;sr=1-1" target="_blank"><img src="images/books/getting-started.png" alt="Getting Started with Backbone Marionette"></a><a href="https://leanpub.com/marionetteexpose?utm_campaign=marionetteexpose&amp;utm_medium=embed&amp;utm_source=marionettejs.com" target="_blank"><img src="images/books/expose.png" alt="Marionette Exposé"></a><a href="https://leanpub.com/building-backbone-plugins?utm_campaign=building-backbone-plugins&amp;utm_medium=embed&amp;utm_source=marionettejs.com" target="_blank"><img src="images/books/bb-plugins.png" alt="Building Backbone Plugins"></a></div></section><section class="support column-contain"><div class="social-network-col"><ul><li><svg width="18" height="18" class="support-link-icon"><use xlink:href="#gitter-square"></use></svg><a href="https://gitter.im/marionettejs/backbone.marionette" target="_blank" class="support-link">Chat with us</a></li><li><svg width="18" height="18" class="support-link-icon"><use xlink:href="#twitter-square"></use></svg><a href="https://twitter.com/marionettejs" target="_blank" class="support-link">Follow us</a></li><li><svg width="18" height="18" class="support-link-icon"><use xlink:href="#github-square"></use></svg><a href="https://github.com/marionettejs/backbone.marionette" target="_blank" class="support-link github"></a></li></ul></div><article class="support_article"><h2>Contribute</h2><p>Marionette greatly appreciates the community! We welcome your support and contributions. Please visit the GitHub repo to report bugs, suggest your ideas, help other users out, and even contribute code.</p><a href="https://github.com/marionettejs/backbone.marionette/issues" target="_blank" class="btn btn-action">GitHub Issues</a></article><div class="cl"></div></section><section class="stickers column-contain"><div class="sticker-pics left"><a href="http://devswag.com/products/marionette-stickers-4" target="_blank"><img src="images/stickers.png" alt="Marionette sticker" class="stickers"></a><a href="http://devswag.com/products/marionette-stickers-4" target="_blank"><img src="images/stickers-laptop.png" alt="Marionette sticker"></a></div><div class="sticker-order right"><header><h2>Stickers!</h2></header><p>Everyone on the Marionette team works for free. Show your support by getting some stickers. Not only will your laptop look cool, your contributions will help further the development of this open source project!</p><a href="http://devswag.com/products/marionette-stickers-4" target="_blank" class="btn btn-action">Show Support</a></div><div class="cl"></div></section><section class="logos column-contain hidden-xs"><h2>Companies Using Marionette</h2><ul class="company-logo-list"><li><a href="http://about.me" target="_blank"><img data-src="images/logos/aboutme.png" alt="about.me" class="adjust"></a></li><li><a href="http://bleacherreport.com" target="_blank"><img data-src="images/logos/bleacherreport.png" alt="Bleacher Report" class="adjust"></a></li><li><a href="http://bocoup.com" target="_blank"><img data-src="images/logos/bocoup.png" alt="Bocoup"></a></li><li><a href="https://www.cloudflare.com/join-our-team" target="_blank"><img data-src="images/logos/cloudflare.png" alt="CloudFlare"></a></li><li><a href="http://disqus.com" target="_blank"><img data-src="images/logos/disqus.png" alt="Disqus" class="adjust"></a></li><li><a href="http://etsy.com" target="_blank"><img data-src="images/logos/etsy.png" alt="Etsy"></a></li><li><a href="https://www.eventbrite.com" target="_blank"><img data-src="images/logos/eventbrite.png" alt="Eventbrite"></a></li><li><a href="http://www.fastcompany.com" target="_blank"><img data-src="images/logos/fastcompany.png" alt="Fast Company" class="adjust"></a></li><li><a href="http://gawker.com" target="_blank"><img data-src="images/logos/gawkermedia.png" alt="Gawker Media Group"></a></li><li><a href="http://moz.com" target="_blank"><img data-src="images/logos/moz.png" alt="Moz"></a></li><li><a href="http://stubhub.com" target="_blank"><img data-src="images/logos/stubhub.png" alt="StubHub"></a></li><li><a href="http://weebly.com" target="_blank"><img data-src="images/logos/weebly.png" alt="Weebly"></a></li><div><a href="#" class="show-more">more</a></div><div class="slider closed"><li><a href="http://advanseez.com" target="_blank"><img data-src="images/logos/advanseez.png" alt="Advanseez" class="adjust"></a></li><li><a href="http://airbrake.io" target="_blank"><img data-src="images/logos/airbrake.png" alt="Airbrake"></a></li><li><a href="http://ajency.in" target="_blank"><img data-src="images/logos/ajency.png" alt="Ajency.in" class="adjust"></a></li><li><a href="http://appsaloon.be/?utm_source=marionettjs&amp;utm_medium=website&amp;utm_campaign=share-url" target="_blank"><img data-src="images/logos/appsaloon.png" alt="AppSaloon" class="adjust"></a></li><li><a href="https://betterment.com" target="_blank"><img data-src="images/logos/betterment.png" alt="Betterment"></a></li><li><a href="http://www.canddi.com" target="_blank"><img data-src="images/logos/canddi.png" alt="CANDDi"></a></li><li><a href="http://carrot.is" target="_blank"><img data-src="images/logos/carrot.png" alt="Carrot"></a></li><li><a href="http://crashlytics.com" target="_blank"><img data-src="images/logos/crashlytics.png" alt="Crashlytics"></a></li><li><a href="http://crowdtwist.com" target="_blank"><img data-src="images/logos/crowdtwist.png" alt="Crowdtwist" class="adjust"></a></li><li><a href="http://cynergy.com" target="_blank"><img data-src="images/logos/cynergy.png" alt="cynergy"></a></li><li><a href="http://dlabs.si" target="_blank"><img data-src="images/logos/dlabs.png" alt="D·Labs"></a></li><li><a href="http://edpuzzle.com" target="_blank"><img data-src="images/logos/edpuzzle.png" alt="EDpuzzle"></a></li><li><a href="https://www.found.no" target="_blank"><img data-src="images/logos/found.png" alt="Found"></a></li><li><a href="http://gomoob.com" target="_blank"><img data-src="images/logos/gomoob.png" alt="GoMoob"></a></li><li><a href="http://growthrepublic.com" target="_blank"><img data-src="images/logos/growthrepublic.png" alt="Growth Republic"></a></li><li><a href="http://www.hail.to" target="_blank"><img data-src="images/logos/hail.png" alt="Hail"></a></li><li><a href="http://www.helpscout.com" target="_blank"><img data-src="images/logos/helpscout.png" alt="Help Scout" class="adjust"></a></li><li><a href="http://www.hookandloopnyc.com" target="_blank"><img data-src="images/logos/hookandloop.png" alt="Hook &amp; Loop" class="adjust"></a></li><li><a href="http://hudl.com" target="_blank"><img data-src="images/logos/hudl.png" alt="Hudl"></a></li><li><a href="https://inside.com" target="_blank"><img data-src="images/logos/inside.png" alt="Inside"></a></li><li><a href="http://inspectall.com" target="_blank"><img data-src="images/logos/inspectall.png" alt="Inspectall" class="adjust"></a></li><li><a href="http://learnvest.com" target="_blank"><img data-src="images/logos/learnvest.png" alt="LearnVest" class="adjust"></a></li><li><a href="http://madglory.com" target="_blank"><img data-src="images/logos/madglory.png" alt="MadGlory" class="adjust"></a></li><li><a href="http://merchbro.com" target="_blank"><img data-src="images/logos/merchbro.png" alt="Merchbro" class="adjust"></a></li><li><a href="https://portal.mimedia.com" target="_blank"><img data-src="images/logos/mimedia.png" alt="MiMedia"></a></li><li><a href="http://mojotech.com" target="_blank"><img data-src="images/logos/mojotech.png" alt="MojoTech"></a></li><li><a href="http://www.mrbooker.ch" target="_blank"><img data-src="images/logos/mrbooker.png" alt="MrBooker" class="adjust"></a></li><li><a href="https://www.myedu.com" target="_blank"><img data-src="images/logos/myedu.png" alt="myEdu"></a></li><li><a href="https://www.onehealth.com" target="_blank"><img data-src="images/logos/onehealth.png" alt="OneHealth"></a></li><li><a href="https://www.mypebble.co.uk" target="_blank"><img data-src="images/logos/pebble.png" alt="Pebble"></a></li><li><a href="http://www.pendorent.com" target="_blank"><img data-src="images/logos/pendorent.png" alt="Pendo Rent"></a></li><li><a href="http://www.pixlee.com" target="_blank"><img data-src="images/logos/pixlee.png" alt="Pixlee" class="adjust"></a></li><li><a href="https://plex.tv" target="_blank"><img data-src="images/logos/plex.png" alt="Plex"></a></li><li><a href="http://popcorntime.io" target="_blank"><img data-src="images/logos/popcorntime.png" alt="popcorntime"></a></li><li><a href="http://railslove.com" target="_blank"><img data-src="images/logos/railslove.png" alt="Railslove" class="adjust"></a></li><li><a href="http://ravenhq.com" target="_blank"><img data-src="images/logos/ravenhq.png" alt="Raven HQt"></a></li><li><a href="http://raygun.io" target="_blank"><img data-src="images/logos/raygun.png" alt="RayGun" class="adjust"></a></li><li><a href="http://rbmaradio.com" target="_blank"><img data-src="images/logos/rbma.png" alt="Red Bull Music Academy Radio"></a></li><li><a href="http://www.revvy.com" target="_blank"><img data-src="images/logos/revvy.png" alt="Revvy"></a></li><li><a href="http://roastlog.com" target="_blank"><img data-src="images/logos/roastlog.png" alt="Roastlog"></a></li><li><a href="http://rollout.io" target="_blank"><img data-src="images/logos/rollout.png" alt="Rollout" class="adjust"></a></li><li><a href="https://www.shopetti.com" target="_blank"><img data-src="images/logos/shopetti.png" alt="shopetti" style="max-height:80px"></a></li><li><a href="http://www.besnappy.com" target="_blank"><img data-src="images/logos/snappy.png" alt="BeSnappy"></a></li><li><a href="http://soom.la" target="_blank"><img data-src="images/logos/soomla.png" alt="Soomla"></a></li><li><a href="http://tiptap.com" target="_blank"><img data-src="images/logos/tiptap.png" alt="TipTap"></a></li><li><a href="https://www.zweitag.de" target="_blank"><img data-src="images/logos/zweitag.png" alt="zweitag"></a></li></div></ul></section><footer><p>Made with<span class="heart-icon">&hearts;</span>by&nbsp;<a href="https://github.com/marionettejs/marionettejs.com/graphs/contributors" target="_blank">all of us</a></p><a href="#0" class="top">Top</a></footer><script src="js/build.js?t=1420897645791"></script><script>// Flattr
(function() {
    var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
    t.parentNode.insertBefore(s, t);
})();

// Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-34606707-1', 'auto');
ga('create', 'UA-52639766-1', {'name':'MnCore'});
ga('send', 'pageview');
ga('MnCore.send', 'pageview');</script></body></html>