CODEWITHSUNDEEP
jquerybackbone.jstwitter-bootstraprequirejs
beNerd
beNerd

Reputation: 3374

bootstrap-datepicker not getting shimmed with requirejs

I am building a application with backbone.js + require.js. I want to use datepicker from here in my application: datepicker

Since its non-AMD, i shim it in requirejs like this:

require.config({
baseUrl: "appjs",

paths:{
    jquery: '../layout_assets/assets/js/libs/jquery-1.8.2.min',
    dt: '../layout_assets/plugins/datatables/jquery.dataTables.min',
    dtPlugins:'../layout_assets/plugins/datatables/dtplugins',
    dtBootstrap: '../layout_assets/plugins/datatables/dataTables.bootstrap',
    underscore: '../assets/js/underscore-min',
    Backbone: '../assets/js/backbone-min',
    bootstrap: '../assets/js/bootstrap.min',
    datepicker:'../layout_assets/bootstrap-datepicker'
    },

    shim: {
        underscore:{
            exports:"_"
        },

        Backbone:{
            deps: ['underscore','jquery'],
            exports: "Backbone"
        },

        dt: {
        deps:['jquery'],
        exports: "dt"   
        },

        dtPlugins: {
            deps:['jquery','dt'],
            exports:"dtPlugins"
            },
        bootstrap: {
        deps:['jquery'],
        exports:"bootstrap"

        },
        dtBootstrap: {
            deps: ['dt','jquery'],
            exports: "dtBootstrap"
        },

        datepicker:{
        deps:['jquery','bootstrap'],
        exports:"datepicker"
        }

        }

});

Now in one of my views i call datepicker like this:

define(['Backbone',
        'underscore',
        'jquery',
        'datepicker',
        'models/reports',
        'dtBootstrap',
        'bootstrap',
        'text!templates/reports/dashboard.html',
        ],function(Backbone,_,$,dp,report,dtBootstrap,bootstrap,dashboard){


        var view=Backbone.View.extend({
            el:"#content-wrap",
            template:_.template(dashboard),
            render:function(){
            this.$("#container-left").html(this.template());
            console.log(dp);
            }

    });
    return view;
    });

This returns undefined on the console. I guess the library is not getting shimmed properly.

Upvotes: 5

Views: 5964

Answers (2)

Chad Price
Chad Price

Reputation: 51

This is the shim that I use:

"datepicker" : {
    deps: ["jquery-ui", "bootstrap"],
    exports: "$.fn.datepicker"
}

for

"datepicker": "lib/datepicker/js/bootstrap-datepicker"

Upvotes: 5

kryger
kryger

Reputation: 13181

Looking at datepicker's source it looks like it doesn't in fact export anything - that's why requirejs can't find the global dt variable to "connect" to (window.dt if run in browser environment). According to datepicker's website, it just adds its function to jQuery object, it's not supposed to be used as a standalone instance. Example from its docs page:

$('#dp5').datepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
      ....
    }

});

Have you tried something like that?

I believe shimming is not necessary in this case.

Upvotes: 0

Related Questions