I have a Workout object and a WorkoutSection object. Both use the other for various attributes. The Workout does not use WorkoutSection during load, however WorkoutSection uses Workout during load.
WorkoutSection.js
define(['require',
// post-load
'models/Workout'
],
function(require) {
// must require Workout because of mutual dependency
var Workout = require('models/Workout');
Workout.js
define([
'require','models/WorkoutSection'
],
function(require) {
// must re-require Workout because of mutual dependency
var WorkoutSection;
var Workout = Parse.Object.extend("Workout",
{
initialize : function() {
WorkoutSection = require('models/WorkoutSection');
},
The error:
Uncaught Error: Module name "models/Workout" has not been loaded yet
for context: _ http://requirejs.org/docs/errors.html#notloaded
require.js:2 H require.js:2 k.s.newContext.j.require require.js:2
requirejs require.js:2 (anonymous function) WorkoutSection.js:20
I am following the solution described in the link, but am still getting the error =S Any ideas that would fix this?
Here's my main.js:
// Filename: main.js
// Require.js allows us to configure shortcut alias
// Their usage will become more apparent futher along in the tutorial.
require.config( {
paths : {
jQuery : 'libs/jquery/jquery-min',
Underscore : 'libs/underscore/underscore-min',
Backbone : 'libs/backbone/backbone-min',
Parse : 'libs/parse/parse-min',
templates : '../templates'
}
});
require( [
// Load our app module and pass it to our definition function
'app',
],
function(App) {
// The "app" dependency is passed in as "App"
// Again, the other dependencies passed in are not "AMD" therefore
// don't pass a parameter to this function
App.initialize();
});
Thanks!
I suggest you either:
try reworking WorkoutSection.js into the CommonJS format as documented here: http://requirejs.org/docs/api.html#cjsmodule
Completely exclude models/WorkoutSection as a dependency of Workout.js
Related
My setup so far:
<script src="/common/js/require.configure.js"></script>
<script src="/common/js/lib/require.js" data-main="/common/js/app.js"></script>
require.configure.js
var require = {
baseUrl: '/',
paths: {
"jquery": "/common/js/lib/jquery",
"fastclick": "/common/js/lib/fastclick",
"knockout": "/common/js/lib/knockout",
"common": "/common/js/scripts/common"
}
};
The top three paths are obviously just libraries that I am using for my application. The last file "common" is a collection of functions that are global to my application such as opening the main menu, giving messages to the user, or binding handlers, etc.
app.js
define(["jquery", "knockout", "fastclick", "common"], function (){
});
I know that requireJS always needs a data-main file to run initially. But what does this above code really do? I trying to follow tutorials online but it is not helping. I'm guessing that by defining those strings in the array, it looks it up in the configuration file and is loading in those files, but how are those files then accessed or used? I'm guessing that I can simply then just "require" those same strings and they will be available to me in my functions?
common.js (simplified for Stack Overflow)
require(["knockout"], function (ko) {
var appViewModel = {};
appViewModel.loaded = ko.observable(false);
});
By wrapping everything in the require() I think that this is injecting the dependencies of needing knockout.
App's First Page - login.html (simplified for S.O.)
In the first page of the app, I define a <script> tag with the following
require(["jquery", "knockout", "fastclick", "common"], function ($, ko, FastClick)
{
$(function(){
appViewModel.loginData = {
email : ko.observable(),
password : ko.observable()
};
});
});
And the resulting error when trying to run is that
Uncaught ReferenceError: appViewModel is not defined
despite the fact that I have included "common" in the require([]).
What am I missing here? I think that I may be completely misunderstanding what "require" and "define" do in requireJS, so that would be a good basis of an answer for me.
i think you want to do something like that:
Modules that define global obj
require(["knockout"], function (ko) {
window.appViewModel = {};
window.appViewModel.loaded = ko.observable(false);
});
Modulw that popule the obj:
require(["jquery", "knockout", "fastclick", "common"], function ($, ko, FastClick)
{
window.appViewModel.loginData = {
email : ko.observable(),
password : ko.observable()
});
Here is my main.js
requirejs.config({
baseUrl: '/js',
paths: {
jquery: 'jquery',
ckeditor: 'ckeditor/ckeditor',
juiAutocomplete: 'jquery-ui-1.10.4.custom',
tags: 'bootstrap-tokenfield',
createPost: 'createPost',
domReady: 'domReady',
test: 'dropUpload'
},
shim: {
createPost: {
deps: ['domReady!']
}
},
deps: ['require'],
callback: function(require) {
'use strice';
var moduleName = location.pathname.replace(/\//g, '-').replace(/^-/, '');
console.log('moduleName is: ' + moduleName);
console.log('yes is: ' + require.config);
}
});
In the callback, I'd like to access the paths which is defined in the requirejs.config() above. If it is possible, how to do it?
My purpose is to see if a module path is defined(exists). If so, then load the module script. If not checked, then a loading error will generate in the console.
Here are the available methods in requirejs by this console command. I can't find a way to access the paths I defined in requirejs.config(). Is this the right direction?
for (var i in requirejs) {console.log(i);}
config
nextTick
version
jsExtRegExp
isBrowser
s
toUrl
undef
defined
specified
onError
createNode
load
exec
undef
There is no public API to get the whole RequireJS configuration from inside a module. You can have a config section in your configuration, which modules may access.
However, the problem you describe trying to solve does not require you to read the configuration. Calling require the normal way will load the module. If the module can't be loaded, it will generate an error on the console. Presumably you also want your code to know whether the loading was successful or not. You can do it with an errback:
require(['foo'], function (foo) {
// Whatever you'd like to do with foo on success.
}, function (err) {
// Whatever you'd like to do on error.
});
If for some reason you must read the config directly then it is located at requirejs.s.contexts.<context name>.config where <context name> is the name of the RequireJS context. The default context is named _ so the configuration for it would be requirejs.s.contexts._.config. However, this is not part of the public API and can change at any time.
So there have been similar questions floating around, but I am hoping to get an up-to-date answer on this.
Versions-
breeze: 1.4.0
Knockout: 2.2.1
RequireJS: 2.1.5
I am trying to load breeze in a requireJS project with knockoutJS. Our requireJS config is very simple-
require.config({
waitSeconds: 15,
paths: {
'templates': "/ist-common/templates",
'lib': '/ist-common/js/lib',
'ist': '/ist-common/js/ist'
}
});
So I loaded the breeze libs into the following directory structure-
lib
---->q.js
---->breeze.debug.js
I am trying to define a "dataservice" module to use breeze and set it up like so-
define(['lib/knockout', 'lib/q', 'lib/breeze.debug'], function (ko, Q, breeze) {
var serviceName = '/ist/rest'; // route to the endpoint
var manager = new breeze.EntityManager(serviceName);
manager.enableSaveQueuing(true);
var query = new EntityQuery("missions");
manager.executeQuery(query, function(data) {
console.log("success");
});
});
Is this configuration possible? I am trying to keep my scripts tags down to a minimum and load only requireJS and then load knockout, jquery etc. as I need them inside my module definitions.
This config currently fails with a message-
Error: Unable to initialize Q. See https://github.com/kriskowal/q
EDIT*
I was able to get it to load Q with the following config for require, however this feels wrong. Why should I be setting window.Q? Shouldn't I be able to access Q as a named module?
var require = {
waitSeconds: 15,
deps: ["/ist-common/js/lib/q.js"],
callback: function(Q){
window.Q = Q;
},
paths: {
'templates': "/ist-common/templates",
'lib': '/ist-common/js/lib',
'ist': '/ist-common/js/ist'
}
};
You also need a shim for breeze (from Using Angular with breeze and require)
breeze: {
deps: ['ko', 'jquery', 'Q']
},
This is required because although breeze does define itself it does not define its dependencies, it just expects them to be there (RequireJs cant interpret it's dependancies in a variable instead of a string?).
The shim is also required because breeze requests 'jQuery' but the jQuery code defines itself as 'jquery'
I'm having a bit of bother getting sammyjs to play with requirejs. Calling $.sammy fails and the error says that sammy is not defined in the jQuery namespace.
Here is my require config
require.config
baseUrl: '/Scripts'
waitSeconds: 10
paths:
bootstrap: './lib/bootstrap/bootstrap'
domReady: './lib/domReady/domReady'
knockout: './lib/knockout/knockout-2.2.1.debug'
jquery: './lib/jquery/jquery-1.9.1'
sammy: './lib/sammy/sammy-0.7.4'
myPage: './app/pages/myPage'
myViewModel: './app/viewModels/myViewModel'
shim:
bootstrap:
deps: ["jquery"]
sammy:
deps: ["jquery"]
exports: "Sammy"
Here's my page javascript
require ['knockout', 'myViewModel', 'domReady!' ], ( ko, viewModel ) ->
myViewModel = new viewModel
ko.applyBindings( myViewModel )
Here's my view model
define [ 'jquery', 'sammy', 'knockout' ], ( $, sammy, ko ) ->
class myViewModel
constructor: ( options ) ->
self = #
#sammypath = ko.observable( 1 )
#router = $.sammy( ->
#get '#/', ( data ) ->
self.sammypath( 1 )
)
#router.run()
However I get an error when I try to call $.sammy
Uncaught TypeError: Object function ( selector, context )
{ // The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery ); }
has no method 'sammy'
I guess it's something that's wrong with the require.config but to be honest I'm just not sure.
The sammy-0.7.4.js file is downloaded fine.
The sammy that is passed through to the define in the view model is not null
I stuck a break-point on the sammy file and it gets hit and recognizes that it's an AMD module. I'm just not sure why it doesn't add itself to the jQuery namespace.
I double checked that the page was loaded correctly first but the domReady module takes care of that.
I'm also using coffeescript but I don't think that that should be an issue.
To get sammy to work I just drop the $. notation since I'm injecting it
#router = sammy( ->
#get( '#/', ( data ) ->
self.sammypath( 1 )
)
)
I can't seem to get $.sammy to work unfortunately. The RequireJs documentation has some hints as to how to get $.sammy to work perhaps
var require = {
deps: ["some/module1", "my/module2", "a.js", "b.js"],
callback: function(module1, module2) {
//This function will be called when all the dependencies
//listed above in deps are loaded. Note that this
//function could be called before the page is loaded.
//This callback is optional.
}
};
It looks like I could use the callback to get this to work with something like this
var require = {
deps: ["jquery", "sammy"],
callback: ($, sammy) ->
$.sammy = sammy
}
But I can't get this to play with the require.config, if someone knows how to sort this let me know! I've seen other people do something like this with knockout and ko and the mapping plugin ko.mapping
Sammy should play nicely with requirejs and already know that it needs the jquery module loaded.
I'm new to sammyjs, so perhaps the answers above were before sammy was amd compatible?
This is a snippet of the current sammyjs version, which shows that it should be ok with requirejs... at least I've not had any trouble with it.
(function(factory){
// Support module loading scenarios
if (typeof define === 'function' && define.amd){
// AMD Anonymous Module
define(['jquery'], factory);
} else {
// No module loader (plain <script> tag) - put directly in global namespace
jQuery.sammy = window.Sammy = factory(jQuery);
}
})(function($){
Here is an example of using it
define(["jquery", "../sammy-0.7.5.min"], function ($, Sammy) {
Sammy('#main', function() {
// define a 'get' route that will be triggered at '#/path'
this.get('#/path', function() {
// this context is a Sammy.EventContext
this.$element() // $('#main')
.html('A new route!');
});
}).run();
}
I'm trying to load Backbone and Underscore (as well as jQuery) with RequireJS. With the latest versions of Backbone and Underscore, it seems kind of tricky. For one, Underscore automatically registers itself as a module, but Backbone assumes Underscore is available globally. I should also note that Backbone doesn't seem to register itself as a module which makes it kind of inconsistent with the other libs. This is the best main.js I could come up with that works:
require(
{
paths: {
'backbone': 'libs/backbone/backbone-require',
'templates': '../templates'
}
},
[
// jQuery registers itself as a module.
'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',
// Underscore registers itself as a module.
'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js'
], function() {
// These nested require() calls are just due to how Backbone is built. Underscore basically says if require()
// is available then it will automatically register an "underscore" module, but it won't register underscore
// as a global "_". However, Backbone expects Underscore to be a global variable. To make this work, we require
// the Underscore module after it's been defined from within Underscore and set it as a global variable for
// Backbone's sake. Hopefully Backbone will soon be able to use the Underscore module directly instead of
// assuming it's global.
require(['underscore'], function(_) {
window._ = _;
});
require([
'order!http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js',
'order!app'
], function(a, app) {
app.initialize();
})
});
I should mention that, while it works, the optimizer chokes on it. I receive the following:
Tracing dependencies for: main
js: "/home/httpd/aahardy/requirejs/r.js", line 7619: exception from uncaught JavaScript throw: Error: Error: Error evaluating module "undefined" at location "/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js":
JavaException: java.io.FileNotFoundException: /home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js (No such file or directory)
fileName:/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js
lineNumber: undefined
http://requirejs.org/docs/errors.html#defineerror
In module tree:
main
Is there a better way of handling this? Thanks!
RequireJS 2.X now organically addresses non-AMD modules such as Backbone & Underscore much better, using the new shim configuration.
The shim configuration is simple to use: (1) one states the dependencies (deps), if any, (which may be from the paths configuration, or may be valid paths themselves). (2) (optionally) specify the global variable name from the file you're shimming, which should be exported to your module functions that require it. (If you don't specify the exports, then you'll need to just use the global, as nothing will get passed into your require/define functions.)
Here is a simple example usage of shim to load Backbone. It also adds an export for underscore, even though it doesn't have any dependencies.
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) { // or, you could use these deps in a separate module using define
});
Note: this simplified code assumes that jquery, backbone and underscore are in files named "jquery.js", "backbone.js" and "underscore.js" in the same directory as this "main" code (which becomes the baseURL for require). If this isn't the case, you'll need to use a paths config.
I personally think with the built-in shim functionality, the advantages of not using a forked version of Backbone & Underscore outweigh the benefits of using the AMD fork recommended in the other popular answer, but either way works.
Update: As of version 1.3.0 Underscore removed AMD (RequireJS) support.
You can use the amdjs/Backbone 0.9.1 and the amdjs/Underscore 1.3.1 fork with AMD support from James Burke (the maintainer of RequireJS).
More info about AMD support for Underscore and Backbone.
// main.js using RequireJS 1.0.7
require.config({
paths: {
'jquery': 'libs/jquery/1.7.1/jquery',
'underscore': 'libs/underscore/1.3.1-amdjs/underscore', // AMD support
'backbone': 'libs/backbone/0.9.1-amdjs/backbone', // AMD support
'templates': '../templates'
}
});
require([
'domReady', // optional, using RequireJS domReady plugin
'app'
], function(domReady, app){
domReady(function () {
app.initialize();
});
});
The modules are properly registered and there is no need for the order plugin:
// app.js
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone){
return {
initialize: function(){
// you can use $, _ or Backbone here
}
};
});
Underscore is actually optional, because Backbone now gets its dependencies on its own:
// app.js
define(['jquery', 'backbone'], function($, Backbone){
return {
initialize: function(){
// you can use $ and Backbone here with
// dependencies loaded i.e. Underscore
}
};
});
With some AMD sugar you could also write it like this:
define(function(require) {
var Backbone = require('backbone'),
$ = require('jquery');
return {
initialize: function(){
// you can use $ and Backbone here with
// dependencies loaded i.e. Underscore
}
};
});
Regarding the optimizer error: doublecheck your build configuration. I assume your path configuration is off. If you have a directory setup similar to the RequireJS Docs you can use:
// app.build.js
({
appDir: "../",
baseUrl: "js",
dir: "../../ui-build",
paths: {
'jquery': 'libs/jquery/1.7.1/jquery',
'underscore': 'libs/underscore/1.3.1-amdjs/underscore',
'backbone': 'libs/backbone/0.9.1-amdjs/backbone',
'templates': '../templates'
},
modules: [
{
name: "main"
}
]
})
For reference, as of version 1.1.1 (~Feb '13), Backbone also registers itself as an AMD module. It will work with requirejs without the need to use its shim config. (James Burke's amdjs fork also hasn't been updated since 1.1.0)
Good news, Underscore 1.6.0 now supports requirejs define !!!
versions below this require shims, or requiring underscore.js then blindly hoping that the "_" global variable hasn;t been smashed (which to be fair is a fair bet)
simply load it in by
requirejs.config({
paths: {
"underscore": "PATH/underscore-1.6.0.min",
}
});
I will write down directly, you can read the explaination on requirejs.org, you could use below code as a snippet for your everyday use; (p.s. i use yeoman) (since many things updated, im posting this as of Feb 2014.)
Make sure you included script in your index.html
<!-- build:js({app,.tmp}) scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->
Then, in main.js
require.config({
shim: {
'backbone': {
deps: ['../bower_components/underscore/underscore.js', 'jquery'],
exports: 'Backbone'
}
},
paths: {
jquery: '../bower_components/jquery/jquery',
backbone: '../bower_components/backbone/backbone'
}
});
require(['views/app'], function(AppView){
new AppView();
});
app.js
/**
* App View
*/
define(['backbone', 'router'], function(Backbone, MainRouter) {
var AppView = Backbone.View.extend({
el: 'body',
initialize: function() {
App.Router = new MainRouter();
Backbone.history.start();
}
});
return AppView;
});
I hope I was useful.!
require.config({
waitSeconds: 500,
paths: {
jquery: "libs/jquery/jquery",
jqueryCookie: "libs/jquery/jquery.cookie",
.....
},
shim: {
jqxcore: {
export: "$",
deps: ["jquery"]
},
jqxbuttons: {
export: "$",
deps: ["jquery", "jqxcore"]
}
............
}
});
require([
<i> // Load our app module and pass it to our definition function</i>
"app"
], function(App) {
// The "app" dependency is passed in as "App"
// Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
App.initialize();
});