Marionette.js. Region. jQuery Animation

Shows how to configure a region to animate with jQuery

by kalinin sergey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="https://rawgit.com/marionettejs/backbone.marionette/next/lib/backbone.marionette.js"></script>
    <nav>
      <a class="page1" href="#page1">page1</a>
      <a class="page2" href="#page2">page2</a>
      <a class="page3" href="#page3">page3</a>
    </nav>

    <main class="content-region" id="contentRegion"></main>

JavaScript

const { View, Application } = Marionette;


const App = Application.extend({
  region: '#contentRegion',

  onStart(app, options) {
    Backbone.history.start();
    this.showView(options.view);
  }
});


const PageModel = Backbone.Model.extend();
const pageModel1 = new PageModel({
  header: 'page 1',
  text: 'lorem upsum 1',
});
const pageModel2 = new PageModel({
  header: 'page 2',
  text: 'lorem upsum 2',
});
const pageModel3 = new PageModel({
  header: 'page 3',
  text: 'lorem upsum 3',
});


const PageView = View.extend();
const pageView1 = new PageView({
  template: _.template('<h1>qwerty <%= header %></h1>'),
  model: pageModel1,
});
const pageView2 = new PageView({
  template: _.template('<h1>qwerty <%= header %></h1>'),
  model: pageModel2,
});
const pageView3 = new PageView({
  template: _.template('<h1>qwerty <%= header %></h1>'),
  model: pageModel3,
});


const app = new App();
app.start({
  view: pageView1,
});


const Router = Backbone.Router.extend({
  routes: {
    '':       'page1',
    'page1':  'page1',
    'page2':  'page2',
    'page3':  'page3',
  },
  page1() {
    app.showView(pageView1);
  },
  page2() {
    app.showView(pageView2);
  },
  page3() {
    app.showView(pageView3);
  }
});
const router = new Router()