How to use marionette - 10 common examples

'use strict';
import {LayoutView} from 'marionette';
import Tooltipable from 'foreground/view/behavior/tooltipable';
import ListItemButtonsView from 'foreground/view/listItemButton/listItemButtonsView';

var ListItemView = LayoutView.extend({
  tagName: 'li',
  className: 'listItem listItem--clickable',

  attributes: function() {
    // Store the clientId on the view until the model has been saved successfully.
    var id = this.model.isNew() ? this.model.cid : this.model.get('id');

    return {
      'data-id': id,
      'data-type': this.options.type,
      // Children unloaded by slidingRender lose track of their parent DOM node.
      'data-parentid': this.options.parentId
    };
  },

  events: {

import _ from 'common/shim/lodash.reference.shim';
import {LayoutView} from 'marionette';
import NotificationTemplate from 'template/notification/notification.hbs!';

var NotificationView = LayoutView.extend({
  id: 'notification',
  className: 'notification panel panel--bottom u-zIndex--5',
  template: NotificationTemplate,

  hideTimeout: null,
  hideTimeoutDelay: 3000,

  initialize: function() {
    // Defer binding event listeners which will hide this view to ensure that events which
    // were responsible for showing it do not also result in hiding.
    _.defer(function() {
      if (!this.isDestroyed) {
        this.listenTo(StreamusFG.channels.element.vent, 'click', this._onElementClick);
      }
    }.bind(this));
  },

import {LayoutView} from 'marionette';
import TooltipTemplate from 'template/tooltip/tooltip.hbs!';

var TooltipView = LayoutView.extend({
  className: 'panel panel--detached',
  template: TooltipTemplate,

  ui: {
    panelContent: 'panelContent'
  },

  modelEvents: {
    'change:text': '_onChangeText'
  },

  // Move the tooltip's location to a spot on the page and fade it in
  showAtOffset: function(offset) {
    this.$el.css('transform', 'translate(' + offset.left + 'px, ' + offset.top + 'px)');
    this.$el.addClass('is-visible');
  },

import {LayoutView} from 'marionette';
import ResizeEmitter from 'foreground/view/behavior/resizeEmitter';
import Slider from 'foreground/model/element/slider';
import SliderTemplate from 'template/element/slider.hbs!';

// Provide a Web Component implementation of <input type="range"> which doesn't utilize an <input> element
// nor any browser stylings. Should support most expected behaviors of an input element.
// Notable differences include support for vertical styling and default support for 'wheel' events.
var SliderView = LayoutView.extend({
  tagName: 'streamus-slider',
  template: SliderTemplate,

  ui: {
    'track': 'track',
    'thumb': 'thumb'
  },

  events: {
    'mousedown': '_onMouseDown',
    'wheel': '_onWheel'
  },

  modelEvents: {
    'change:length': '_onChangeLength'
  },

import _ from 'common/shim/lodash.reference.shim';
import {LayoutView} from 'marionette';
import Checkbox from 'foreground/model/element/checkbox';
import CheckboxView from 'foreground/view/element/checkboxView';
import KeyCode from 'foreground/enum/keyCode';
import DialogTemplate from 'template/dialog/dialog.hbs!';

var DialogView = LayoutView.extend({
  className: 'dialog overlay overlay--faded',
  template: DialogTemplate,
  contentView: null,

  regions: {
    reminder: 'reminder',
    content: 'content'
  },

  ui: {
    panel: 'panel',
    submitButton: 'submitButton',
    cancelButton: 'cancelButton',
    submittable: 'submittable'
  },

import {LayoutView} from 'marionette';
import CheckboxTemplate from 'template/element/checkbox.hbs!';

var CheckboxView = LayoutView.extend({
  tagName: 'checkbox',
  className: function() {
    var className = this.model.get('primary') ? 'checkbox--primary' : 'checkbox--secondary';
    className += this.model.get('iconOnLeft') ? ' checkbox--leftIcon' : ' checkbox--rightIcon';
    return className;
  },
  template: CheckboxTemplate,

  ui: {
    icon: 'icon'
  },

  events: {
    'click': '_onClick',
    'webkitAnimationEnd @ui.icon': '_onIconWebkitAnimationEnd'
  },

import {LayoutView} from 'marionette';
import SpinnerView from 'foreground/view/element/spinnerView';
import SearchResultsView from 'foreground/view/search/searchResultsView';
import VideoActions from 'foreground/model/video/videoActions';
import Tooltipable from 'foreground/view/behavior/tooltipable';
import SearchTemplate from 'template/search/search.hbs!';

var SearchView = LayoutView.extend({
  id: 'search',
  className: 'leftPane flexColumn panel-content panel-content--uncolored u-fullHeight',
  template: SearchTemplate,

  templateHelpers: {
    searchMessage: chrome.i18n.getMessage('search'),
    saveAllMessage: chrome.i18n.getMessage('saveAll'),
    addAllMessage: chrome.i18n.getMessage('addAll'),
    playAllMessage: chrome.i18n.getMessage('playAll'),
    notSignedInMessage: chrome.i18n.getMessage('notSignedIn'),
    startTypingMessage: chrome.i18n.getMessage('startTyping'),
    resultsWillAppearAsYouSearchMessage: chrome.i18n.getMessage('resultsWillAppearAsYouSearch'),
    searchingMessage: chrome.i18n.getMessage('searching'),
    noResultsFoundMessage: chrome.i18n.getMessage('noResultsFound'),
    trySearchingForSomethingElseMessage: chrome.i18n.getMessage('trySearchingForSomethingElse')
  },

import _ from 'common/shim/lodash.reference.shim';
import {LayoutView} from 'marionette';
import DialogContent from 'foreground/view/behavior/dialogContent';

var ClearStreamView = LayoutView.extend({
  template: chrome.i18n.getMessage('clearStreamQuestion'),
  behaviors: {
    DialogContent: {
      behaviorClass: DialogContent
    }
  }
});

export default ClearStreamView;

import _ from 'common/shim/lodash.reference.shim';
import {LayoutView} from 'marionette';
import DialogContent from 'foreground/view/behavior/dialogContent';

var UpdateStreamusView = LayoutView.extend({
  template: chrome.i18n.getMessage('anUpdateIsAvailable'),

  behaviors: {
    DialogContent: {
      behaviorClass: DialogContent
    }
  }
});

export default UpdateStreamusView;

import _ from 'common/shim/lodash.reference.shim';
import {LayoutView} from 'marionette';
import DialogContent from 'foreground/view/behavior/dialogContent';

var LinkUserIdView = LayoutView.extend({
  template: chrome.i18n.getMessage('linkAccountsMessage'),

  behaviors: {
    DialogContent: {
      behaviorClass: DialogContent
    }
  }
});

export default LinkUserIdView;