Backbone.Marionette

• Struktura do budowania dużych aplikacji JS
• Prosty i elastyczny sposób działania (jak to Backbone)
• Eliminuje dużo problematycznych elementów Backbone

Marionette Views

• ItemView             → Model
• CollectionView   → Collection
• CompositeView  → Model + Collection

Marionette.ItemView

var MyView = Marionette.ItemView.extend({
  el: '#my-element',

  template: false,

  ui: {
    paragraph: 'p',
    button: '[data-button-log]'
  },

  events: {
    'click @ui.button': 'clickedButton'
  },

  clickedButton: function() {
    console.log('I clicked the button!');
  }
});

var view = new MyView();
view.render();

view.ui.paragraph.text();        // returns 'Hello SEO World'
view.ui.button.trigger('click'); // logs 'I clicked the button!'

<div id="my-element">
  <p>Hello SEO World</p>
  <button data-button-log>Click Me</button>
</div>

Marionette.Region

Region dostarcza metody do zarządzania, pokazywania oraz ukrywania widoków we wskazanych miejscach.

Marionette.LayoutView

Jest to hybryda ItemView i kolekcji obiektów Region. To idealnie nadaje się do renderowania layoutów z wieloma sub-widokami, którymi zarządzają regiony.

var AppLayoutView = Marionette.LayoutView.extend({
  el: 'body',
  template: AppLayoutTemplate,

  regions: {
    menu: "#menu",
    content: "#content"
  }
});


var layoutView = new AppLayoutView();
layoutView.render();

layoutView.getRegion('menu').show(new MenuView());
layoutView.getRegion('content').show(new MainContentView());

Backbone.Radio

Radio jest wbudowanym w Marionette rozszerzeniem, umożliwiającym różne sposoby komunikacji (events) wewnątrz aplikacji.

var userChannel = Backbone.Radio.channel('user');


// Simple on/trigger
userChannel.on('some:event', function() {
  console.log('An event has happened!');
});

userChannel.trigger('some:event');



// Request / replay
userChannel.reply('some:request', 'food is good');

userChannel.request('some:request');

Marionette.Behaviors

Marionette.Behaviors to są klasy, które rozszerzają widoki o dodatkowe funkcjonalności.

var MyView = Marionette.ItemView.extend({
  ui: {
    "destroy": "[data-destroy]"
  },

  behaviors: {
    DestroyWarn: {
      message: "you are destroying all your data is now gone!"
    }
  }
});

var DestroyWarn = Marionette.Behavior.extend({
  defaults: {
    "message": "You are destroying!"
  },

  events: {
    "click @ui.destroy": "warnBeforeDestroy"
  },

  warnBeforeDestroy: function() {
    alert(this.options.message);
    this.view.destroy();
  }
});

Marionette

w TransPlace

var ThanksView = Marionette.ItemView.extend({
  el: 'body',
  template: function() {
    return "  Dzięki!  ";
  }
});

var view = new ThanksView();
view.render();