velocity is not a function

1.8k views Asked by At

I am using requirejs to load my file(s) and dependancies. I am then using grunt to compress everything into one file. I can see that all of my plugins are getting loaded/compiled in my final js file (above all of my application specific methods).

I have a select input with some values, when the select changes - depending on the value, I want to show/hide some additional things on my page. Pretty straight-forward.

What I don't quite understand is why i'm getting "velocity is not a function" when I call it. I know it's because it isn't seeing something - but what I can tell, everything is there.

Here is my config file and the application file that has the event listener. Everything is working great - until velocity is called. Looking at the docs, it seems like I'm calling velocity correctly.

config.js

'use strict';

/**
 * RequireJS configuration.
 *
 */
requirejs.config({
    'baseUrl': '/resources/js/',
    'paths': {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min',
        'bootstrap': 'vendor/bootstrap.min',
        'domReady': 'plugins/domReady',
        'velocity': 'plugins/velocity.min'
    },
    'shim': {
        'bootstrap': {
            'deps': ['jquery']
        }, 'velocity': {
            'deps': ['jquery']
        }
    }
});

/**
 * Application initialization.
 *
 * @param {object} application | Main application module.
 * @returns {object}
 *
 */
requirejs(['application'], function (application) {
    application.initialize();
});

application.js

'use strict';
/**
 * Primary application module.
 *
 * @param {function} $ | jQuery library.
 * @returns {object}
 *
 */

define([
    'jquery',
    'bootstrap',
    'velocity',
    'domReady!'
], function ($) {
    var initialize = function () {
        console.info('Application initialized');

    /**
     * Event listener for change.
     *
     * @param {object} event | The change event.
     * @returns void
     *
     */
    $('#mySelect').change(function (event) {
        switch ($(this).val()) {
            case'Value One':
                $('#isValueOne').velocity('slideDown', { 'duration': 1500 });
                break;
            case'Small Value Two':
                break;
            case'Value Three':
                break;
            default:
                break;
            }
        });
    };

    return {
        'initialize': initialize
    };
}); 

html

<div id="isValueOne">
    <h1>Hello World!</h1>
</div> 

EDIT

If I use slideDown(), Everything works - the div slides down to reveal the text.

jquery

....
$("#isValueOne").slideDown("fast", function () {
    // this works great.
}); 

EDIT

Here is my Gruntfile.js configuration:

grunt.initConfig({
    'pkg': grunt.file.readJSON('package.json'),
        'requirejs': {
            'options': {
                'baseUrl': 'resources/js',
                'mainConfigFile': 'resources/js/config.js',
                'name': 'application',
                'include': ['config'],
                'wrapShim': true,
                'out': 'resources/js/application.js'
            },
            'development': {
                'options': {
                    '_build': false,
                    'optimize': 'none',
                    'out': '../web/resources/js/application.js'
                }
            },
            'production': {
                'options': {
                    '_build': true,
                    'optimize': 'uglify',
                    'out': '../web/resources/js/application.min.js'
                }
            }
        },
        ....
        ....

       grunt.loadNpmTasks('grunt-contrib-requirejs');
       grunt.registerTask('development', ['requirejs:development', 'sass', 'watch']);

To run, I use grunt development

0

There are 0 answers