Marionette.js. Application. Start

When Application was initialized and start method was called a set of events will be called in a specific order.

by marionettejs

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>
<div id="main-region"></div>

JavaScript

const { View, Application } = Marionette; // import { View, Application } from 'backbone.marionette';

const MyModel = Backbone.Model.extend();

const MyView = View.extend({
  template: _.template('<h1><%= title %></h1>')
});

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

  onBeforeStart(app, options) {
    this.model = new MyModel(options.data);
  },

  onStart(app, options) {
    this.showView(new MyView({
      model: this.model
    }));
    Backbone.history.start();
  }
});

const app = new App();

app.start({
  data: {
    title: 'Marionette says hello!'
  }
});