guhcampos
9/22/2016 - 4:42 PM

requirejs_backbone_bootstrap.js

//
// config.js
//
requirejs.config({
  baseUrl: '/static/',
  paths: {
    backbone: 'backbone/backbone',
    bootstrap: 'bootstrap/js/bootstrap',
    bootstrap_select: 'bootstrap-select/bootstrap-select',
    c3: 'c3/c3',
    d3: 'd3/d3',
    datatables: 'datatables/datatables',
    datatables_buttons: 'datatables-buttons/dataTables.buttons',
    handlebars: 'handlebars/handlebars',
    jquery: 'jquery/jquery',
    jquery_match_height: 'jquery-match-height/jquery.matchHeight',
    math: 'mathjs/math',
    pace: 'pace/pace',
    patternfly: 'patternfly/js/patternfly',
    underscore: 'underscore/underscore',
    text: 'text/text',
  },
  shim: {
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone',
    },
    bootstrap: {
      deps: ['jquery'],
    },
    patternfly: {
      deps: ['jquery', 'bootstrap'],
    },
    underscore: {
        exports: '_'
    },
    bootstrap_select: {
      deps: ['jquery', 'bootstrap'],
      init: function($) {
        'use strict';
        $('select').selectpicker();
      }
    },

  }
});

//
// view.js
//
define (function (require) {

  'use strict';

  // Vendor Dependencies
  var $ = require(['jquery', 'bootstrap', 'patternfly', 'bootstrap_select']);
  var _ = require('underscore');
  var Backbone = require('backbone');
  var Handlebars = require('handlebars');

  // System Dependencies
  var template = require('text!path/to/my/template.handlebars');
  var myCollection = require('path/to/my/collection')

  // View Definition
  var MyView = Backbone.View.extend({

    el: "#mytoolbar",
    template: Handlebars.compile(template),

    // Event triggerer for the user search box
    events: {
      'change #toolbar-search': function(e) {
        Backbone.GlobalListener.trigger("change:search", $("#toolbar-search").value);
      }
    },

    initialize: function(someobj) {

      this.someobj = someobj;
      this.someobj.fetch();

      this.selectData = new myCollection();
      this.selectData.fetch();

      this.listenTo(this.someobj, 'sync', this.render);
      this.listenTo(this.selectData, 'sync', this.render);
      this.listenTo(this, 'render', this.post_render);
    },

    render: function() {
      this.$el.html(
        this.template({options: this.selectData.pluck('mymodelnamefield')})
      );
      this.trigger('render');
      return this;
    },

    post_render: function() {
      this.$el.find('.selectpicker').selectpicker(); // ERROR this.$el.find(...).selectpicker is not a function
    }
  });

  return MyView;
});