How to use the backbone.marionette.CompositeView function in backbone

},{"hbsfy/runtime":8}],22:[function(require,module,exports){
var Marionette = require('backbone.marionette');

var TodoItemView = require('./item');
var tpl = require('./collection.hbs');



// Item List View
// --------------
//
// Controls the rendering of the list of items, including the
// filtering of activs vs completed items for display.
module.exports = Marionette.CompositeView.extend({
    template: tpl,
    itemView: TodoItemView,
    itemViewContainer: '#todo-list',

    ui: {
        toggle: '#toggle-all'
    },

    events: {
        'click @ui.toggle': 'onToggleAllClick'
    },

    collectionEvents: {
        'all': 'update'
    },

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
import _ from 'underscore';
import Marionette from 'backbone.marionette';
import Condition from './condition';
import ConditionView from './gate-condition-view';
import ConditionsEmptyView from './gate-conditions-empty-view';
import Template from './templates/quality-gate-detail-conditions.hbs';
import { translate } from '../../helpers/l10n';

export default Marionette.CompositeView.extend({
  template: Template,
  childView: ConditionView,
  emptyView: ConditionsEmptyView,
  childViewContainer: '.js-conditions',

  ui: {
    metricSelect: '#quality-gate-new-condition-metric'
  },

  events: {
    'click .js-show-more': 'showMoreIntroduction',
    'change @ui.metricSelect': 'addCondition'
  },

  childViewOptions () {
    return {

*
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
import Marionette from 'backbone.marionette';
import ProfileView from './rule-profile-view';
import ProfileActivationView from './profile-activation-view';
import Template from '../templates/rule/coding-rules-rule-profiles.hbs';

export default Marionette.CompositeView.extend({
  template: Template,
  childView: ProfileView,
  childViewContainer: '#coding-rules-detail-quality-profiles',

  childViewOptions() {
    return {
      app: this.options.app,
      rule: this.model,
      refreshActives: this.refreshActives.bind(this)
    };
  },

  modelEvents: {
    change: 'render'
  },

serializeData() {
    return {
      ...Marionette.CompositeView.prototype.serializeData.apply(this, arguments),
      organization: this.collection.organization
    };
  }
});

import Marionette from 'backbone.marionette';
import NavPillsStackedCollection from './collection';
import NavPillsStackedListItemView from './listItem';
import listTemplate from './list.ejs';
import './style.less';


export default Marionette.CompositeView.extend({
    template: listTemplate,

    childView: NavPillsStackedListItemView,

    childViewContainer: 'ul',

    initialize(options) {
        this.collection = new NavPillsStackedCollection(options.items || []);
    },

    setItems(items) {
        this.collection.set(items);
    },
});

'use strict';

var $ = require('jquery');
var padTwo = require('../../common/utils/padTwo');
var moment = require('moment');
var LessonView = require('./LessonView');
var Marionette = require('backbone.marionette');
var _ = require('underscore');
var template = require('../templates/table.hbs');

module.exports = Marionette.CompositeView.extend({
  id: 'timetable',
  tagName: 'table',
  childView: LessonView,
  childViewOptions: function () {
    return {
      parentView: this,
      timetable: this.collection
    };
  },
  template: template,
  timerUpdateDayTime: null,

  events: {
    'mousemove': 'mouseMove',
    'mouseleave': 'mouseLeave'
  },

student.accountType === 'P') ||
           (stat.Faculty !== student.faculty && student.accountType === 'G');
  },
  'Reserved for [G] in later round': function (stat, student) {
    return (stat.Faculty !== student.faculty && student.accountType === 'G');
  },
  'Not Available for [G]': function (stat, student) {
    return (stat.Faculty === student.faculty && student.accountType === 'P');
  }
};

function determineStatRelevance (stat, student) {
  return studentAcctTypeMapping[stat.StudentAcctType](stat, student);
}

module.exports = Marionette.CompositeView.extend({
  template: template,
  filterStats: function (faculty, accountType, newStudent) {
    var stats = this.model.attributes.stats;
    _.each(stats, function (semester) {
      semester.BiddingStats = _.filter(semester.BiddingStats, function (stat) {
        return determineStatRelevance(stat, {
          faculty: faculty,
          accountType: accountType,
          newStudent: newStudent
        });
      });
    });
  }
});

constructor: function(){
    Mn.CompositeView.apply(this, arguments);

    this.on('show', function(){
      this.container = this.$el.parent()[0];
      this.$el.parent().on('scroll', _.throttle(this.onScroll.bind(this), 1000/60));
    });

    this.listenTo(this.collection, {
      request : this.startLoading,
      sync    : this.endLoading
    });
  },

events: {
    'click a': 'onClick'
  },
  modelEvents: {
    'change': 'render'
  },
  onClick: function (e) {
    e.preventDefault();
    this.trigger('click', this.model.get('target'));
  },
  onRender: function () {
    this.$el.toggleClass('active', this.model.get('active') || false);
  }
});

var NavbarView = Marionette.CompositeView.extend({
  template: tmpl,
  childView: ItemView,
  childViewContainer: '.js-list',
  className: 'navbar navbar-inverse navbar-fixed-top',
  onChildviewClick: function (view, target) {
    this.trigger('navigate', target);
  },
  setActive: function (target) {
    this.collection.each(function (model) {
      model.set('active', model.get('target') === target);
    });
  }
});

module.exports = NavbarView;

'use strict';

var _ = require('underscore');
var Marionette = require('backbone.marionette');
var FriendsListItemView = require('./FriendsListItemView');
var template = require('../templates/friends_list_empty.hbs');

var EmptyView = Marionette.ItemView.extend({
  template: template
});

module.exports = Marionette.CompositeView.extend({
  childView: FriendsListItemView,
  childViewContainer: 'div',
  emptyView: EmptyView,
  template: _.template('<div></div>')
});