我正在使用 requirejs 加载我的文件和依赖项。然后我使用 grunt 将所有内容压缩到一个文件中。我可以看到我的所有插件都在我的最终 js 文件中加载/编译(在我所有的应用程序特定方法之上)。
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. 很直接。
我不太明白的是为什么我在调用它时会得到“速度不是函数”。我知道这是因为它没有看到任何东西——但我可以说,一切都在那里。
这是我的配置文件和具有事件侦听器的应用程序文件。一切都很好 - 直到调用速度。查看文档,似乎我正确地调用了速度。
配置.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();
});
应用程序.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