I been trying to extend template application from http://net.tutsplus.com/tutorials/javascript-ajax/building-a-scalable-app-with-backbone-js/ . With following implementation I am facing “Uncaught ReferenceError: jQuery is not defined”. Can someone please let me know what could be the problem causing it.
config.js
// Set the require.js configuration for your application.
require.config({
// Initialize the application with the main application file
deps: ["main"],
urlArgs: "bust=" + (new Date()).getTime(),
waitSeconds: 15,
paths: {
// JavaScript folders
libs: "../assets/js/libs",
plugins: "../assets/js/plugins",
// Libraries
//jquery: "../assets/js/libs/jquery",
jquery: "http://code.jquery.com/jquery-1.7.min",
jquerycookie: "../assets/js/libs/jquery.cookie",
jqueryDataTables: "../assets/js/libs/jquery.dataTables.min",
jqueryValidate: "../assets/js/libs/jquery.validate",
jqueryValidateUnobtrusive: "../assets/js/libs/jquery.validate.unobtrusive",
underscore: "../assets/js/libs/underscore",
backbone: "../assets/js/libs/backbone",
highcharts: "../assets/js/libs/highcharts/highcharts",
highstock: "../assets/js/libs/highcharts/highstock",
easyXDM: "../assets/js/libs/easyXDM/easyXDM.min",
dateFormat: "../assets/js/libs/date.format",
// Shim Plugin
use: "../assets/js/plugins/use"
},
priority: [
'jquery',
'jquerycookie',
'jqueryValidate',
'jqueryValidateUnobtrusive',
'underscore',
'easyXDM',
"highcharts",
"highstock",
"dateFormat"
],
use: {
backbone: {
deps: ["use!underscore", "jquery"],
attach: "Backbone"
},
jqueryDataTables: {
deps: ["jquery"]
},
jqueryValidate: {
deps: ["jquery"]
},
jqueryValidateUnobtrusive: {
deps: ["jquery", "jqueryValidate"]
},
jquerycookie: {
deps: ["jquery"]
},
underscore: {
attach: "_"
},
highcharts: {
exports: 'Highcharts'
},
highstock: {
exports: 'highstock'
}
}
});
main.js
require([
"namespace",
// Libs
"jquery",
"jqueryDataTables",
"use!backbone",
'jquerycookie',
'jqueryValidate',
'jqueryValidateUnobtrusive',
'highcharts',
// Modules
"modules/tricklebot",
"modules/home",
"modules/dashboard",
"modules/profile",
"modules/transactions",
"modules/analysis",
"modules/signup",
],
function(namespace, $, jqDT, Backbone,
jqCookie, jqValidate, jqValidateUnobtrusive, highcharts,
tricklebot, Home, Dashboard, Profile, Transactions, Analysis, Signup) {
......
......
我认为您正在遵循一个过时的教程,require.js配置中的use
和priority
已被shim
替换,请查看: https : //github.com/jrburke/requirejs/wiki/Upgradeing-to-RequireJS-2.0
There is an easier way to load plain JS files now with newer RequireJS - a way that avoids all that paths, maps, shim nonsense:
require(['jquery'],function($){
require(
[
'path/to/my/module'
, 'path/to/plugin1' // <- plain js file but OMIT ".js" extension in the ID
, 'path/to/plugin2' // <- plain js file but OMIT ".js" extension in the ID
, 'path/to/plugin3' // <- plain js file but OMIT ".js" extension in the ID
]
, function(myModule /*, it does not matter what plugins return*/){
// jQuery will have all the above plugins applied by now
// because they apply their code to global window.jQuery
// just start using them
$(selector).plugin1(blah)
}
)
})
The use of plan JavaScript file without ".js" makes it subject to all 'maps' and 'paths' modifications just like module IDs, but still does not complain when/if the plain JS file is not a module.
The modules are NOT reloaded on subsequent loads because they are cached from the first time. Profit!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.