Эта статья будет полезна людям, которые только начали изучать фреймворки javascript. Некоторые из вас могут знать об this и других статьях, в которых описывается, как сложно погрузиться в мир javascript. Мы решили написать эту статью, чтобы облегчить жизнь людям, которые хотят присоединиться к сообществу javascript.

Существует множество библиотек, фреймворков, инструментов и прочего, что может запутать новичка в javascript. Если вы что-то знали о javascript и хотите попробовать какой-нибудь javascript-фреймворк, мы предлагаем Marionette.js.

В этой статье мы попытаемся создать стартовую страницу, создав html страницу и написав код javascript с помощью Marionette.js без каких-либо инструментов сборки или других вещей, которые могут вас запутать.

Примечание. Marionette.js построен на основе Backbone.js, и, поскольку Backbone.js не может работать без jQuery, Underscore.js.

Напишем код! Прежде всего вам нужно создать html страницу со всеми необходимыми зависимостями.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>First application with Marionette.js</title>
</head>
<body>
  <div id="app"></div>
  <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://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.1.0/backbone.marionette.js"></script>
</body>
</html>

Примечание. Скрипты загружаются с использованием cdn вместо локального копирования файлов.

#app - это основная область, в которой будет отображаться весь контент, использующий Marionette.js.

Нам нужно создать какой-нибудь javascript-файл, но перед этим нужно заглянуть в документацию.

Итак, мы расширим класс Marionette.Application, чтобы создать свой собственный. Мы используем для этого принцип наследования.

var App = Marionette.Application.extend({
  region: '#app'
});

Теперь, чтобы показать что-то в нашем регионе, нам нужно создать представление.

Примечание. Здесь документы о просмотрах.

var View = Mn.View.extend({
  template: '#template-layout'
});

template для View - это селектор jQuery для тега скрипта в нашем теле HTML. В этом примере мы используем шаблонизатор Underscore.

<script id="template-layout" type="x-template/underscore">
  <div id="content">
    <h1>&nbsp;</h1>
    <h2>Welcome!</h2>
    <ul>
      <li><a href="http://marionettejs.com/">Marionette.js homepage</a></li>
    </ul>
  </div>
</script>

Чтобы показать View в основной области, можно использовать метод showView при запуске приложения. Окончательный код класса приложения будет:

var App = Marionette.Application.extend({
  region: '#app',

  onStart: function() {
    this.showView(new View());
  }
});

Давайте соберем весь код в какой-нибудь файл, назовем его app.js и включим в html.

(function() {

  var View = Mn.View.extend({
    template: '#template-layout'
  });

  var App = Mn.Application.extend({
    region: '#app',

    onStart: function() {
      this.showView(new View());
    }
  });

  var app = new App();

  app.start();

})();

Примечание. Весь код закрывается, чтобы переменные не попадали в глобальную область видимости.

Окончательную рабочую версию вы можете найти здесь.

Примечание. В нем используются функции ES2015.

Если возникнут проблемы, просто поговорите с нами.

Спасибо.