How do I integrate requirejs?

Question

I have a file in my ASP.NET MVC project which depends on Jquery:

// namespace pattern
var diem = diem  || {};
diem .defineNamespace = function(ns_string) {
    var parts = ns_string.split('.');
    var parent = diem ;
    var i;

    if(parts[0] === "diem ") {
        parts = parts.slice(1);
    }

    for(i = 0; i < parts.length; i += 1) {    
        if(typeof parent[parts[i]] === "undefined") {
            parent[parts[i]] = {};
            parent = parent[parts[i]];
        }
        return parent;
    }
};

diem.defineNamespace('diem.utils');

// module pattern
diem.utils = (function() {
    // private API
    // ...
    // public API
    return {
        handleFileInputs: function(container) {
            $(container + ' ' + 'input[type="image"]').click(function(e) {
                // prevent from submission
                e.preventDefault();
                // handle add/remove items
                if($(this).hasClass('add')) {
                    $(this).parent().append('<p><input type="file" accept="image/jpeg,image/png,image/gif" name="files" /></p>');
                } else {
                    $(this).parent().find('p:last-child').remove();
                } // if($(this).hasClass('add')) {
            });
        }, // handleFileAttachments: function() {
        handleLabelWidths: function(container) {
            var max = 0;
            $(container + ' ' + 'label.autoWidth').each(function() {
                if($(this).width() > max) {
                    max = $(this).width(); 
                }
            });
            $(container + ' ' + 'label.autoWidth').width(max + 5);
        } // handleLabelWidths: function(container) {
    } // return {
})(); // streamlined.utils = (function() {

Also there's a code that depends on Modernizr library.

How do I use my code, JQuery, Modernizr, and requirejs together?

Thanks!

Robin Maben · Accepted Answer · 2012-08-23 13:36:47Z

1

Assuming you put all your .js files in a "scripts" subdirectory

<script data-main="scripts/main.js" src="scripts/require-jquery.js"></script>

In main.js

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

answered Aug 23, 2012 at 13:36

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lexeme Over a year ago

is scripts/main case sensitive?

Robin Maben Over a year ago

@brick: AFAIK, neither file name nor folder name are case sensitive in the src attribute.

Collectives™ on Stack Overflow

How do I integrate requirejs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related