Question

我正在使用requirejs来加载我的文件和依赖项。然后我使用grunt将所有内容压缩成一个文件。我可以看到我的所有插件都在我的最终js文件中加载/编译（在我所有特定于应用程序的方法之上）。

我有一个带有一些值的选择输入，当选择更改时 - 根据值，我想在我的页面上显示/隐藏一些额外的东西。很直接。

我不太明白为什么我得到＆＃34;速度不是一个功能＆＃34;当我打电话给它。我知道这是因为它没有看到什么 - 但我可以说，一切都在那里。

这是我的配置文件和具有事件监听器的应用程序文件。一切都很好 - 直到调用速度。看看文档，似乎我正确地调用了速度。

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>

修改

如果我使用slideDown()，一切正常 - div会向下滑动以显示文字。

jquery的

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

修改

这是我的Gruntfile.js配置：

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']);

要运行，我使用grunt development

速度不是一个功能

0 个答案: