ryanve / response.js

Responsive design toolkit
http://responsejs.com
Other
801 stars 123 forks source link

working with RequireJS #54

Closed peppertech closed 9 years ago

peppertech commented 9 years ago

Trying to get response.js to work with a demo project that I'm putting together for JavaOne this year. I'm using requirejs for all of the libraries and just can't seem to get response.js to load properly.

setting the path without any shims returns the error message of dependencies not being loaded. So I added the shim for deps on jquery. That allows things to apparently load correctly, but I just get an undefined error if I try to call response.deviceW()

Has anyone gotten this to work with requireJS properly?

peppertech commented 9 years ago

Here is what the requireJS config code looks like just in case it helps:

requirejs.config({
    // Path mappings for the logical module names
    paths: {
        'knockout': 'libs/knockout/knockout-min',
        'jquery': 'libs/jquery/jquery',
        'foundation': 'libs/foundation/foundation.min',
        'response': 'libs/response/response'
    },
    // Shim configurations for modules that do not expose AMD
    shim: {
        'jquery': {
            exports: ['jQuery', '$']
        },
        'foundation': {
            deps: ['jquery']
        },
        'response': {
            deps: ['jquery']
        }
    }
});

require(['knockout', 'jquery', 'response', 'foundation'],
        function (ko, $, res) 
        {
            var test = res.deviceW();
            console.log('width: ' + res.deviceW());
       });
peppertech commented 9 years ago

Ok, looks like I figured this out. You have to use the capital "R" for "Response". Change the above require call to look like this:

require(['knockout', 'jquery', 'response', 'foundation'],
function (ko, $) 
{
var test = Response.deviceW();
console.log('width: ' + test);
});

Everything works fine now.

ryanve commented 9 years ago

@peppertech Yes it's defined as 'Response' in the source. I'm glad you got it working. In retrospect I should have made the export name be all lowercase to simplify this sort of issue.

peppertech commented 9 years ago

@ryanve Thanks for the verification Ryan. I did have some issue with the crossover event and have experienced "extra" resize events at times, but it's working well enough for my demo code. Not sure how active you are with development of this library, but if you like, I can file some bugs and test code. I really like how you have it setup and I see some real potential for it's use.