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();
}
Related
So, after clicking on a button I want to display a Lightbox containing a link to youtube.
I use requirejs and lightbox in my project, but I get an error:
"Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'colorbox'"
I think the function doesn't find Colorbox, but I don't know why.
This is my file: openYoutubeLink:
define( [ 'modules/common/preferences' ], function ( preferences ) {
return function () {
$.colorbox({width:"900px", height:"600px", iframe:true, href:"youtube.de"});
};
});
Here a part of my main.js with the require.config:
paths: {
colorbox : 'libs/jquery/jquery.colorbox-min'
}
shim: {
'colorbox' : { deps: [ 'jquery' ], exports: 'jquery' }
}
I would make it so that the main module requires jQuery and the colorbox plugin. I'd require them so that I'm sure they are both loaded when my module executes. Currently, it looks like you have the global $ defined but this looks like happenstance rather than design.
So after modifications it would look like this:
define(['modules/common/preferences', 'jquery', 'colorbox'],
function (preferences, $) {
return function () {
$.colorbox({width:"900px", height:"600px", iframe:true, href:"youtube.de"});
};
});
Also, I do not believe this is the source of your immediate problem but I should mention that the exports here is wrong:
shim: {
'colorbox' : { deps: [ 'jquery' ], exports: 'jquery' }
}
You want to have a symbol which is specific to the module being shimmed. For instance, I use the cookie plugin for jQuery and shim it like this:
'jquery.cookie': {
deps: ["jquery"],
exports: "jQuery.cookie"
}
jQuery.cookie is a symbol which is defined if and only if the jquery.cookie file has loaded and executed properly.
(kryger suggested not defining exports. While it is true that the RequireJS documentation says that plugins like those of jQuery or Backbone don't need to have an exports defined, the same documentation then mentions that the detection of error conditions won't work if exports is not used. I consider the best practice to be always defining an exports rather than wait until eventual problems crop up.)
I'm putting together a framework using requireJS with a CDN version of jQuery (as is now the recommended approach) and having some issue when optimizing the code. The output is namespaced and I'm specifying that each module use a private version of jquery as outlined in the documentation:
require.config({
// Add this map config in addition to any baseUrl or
// paths config you may already have in the project.
map: {
// '*' means all modules will get 'jquery-private'
// for their 'jquery' dependency.
'*': { 'jquery': 'jquery-private' },
// 'jquery-private' wants the real jQuery module
// though. If this line was not here, there would
// be an unresolvable cyclic dependency.
'jquery-private': { 'jquery': 'jquery' }
}
});
// and the 'jquery-private' module, in the
// jquery-private.js file:
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
The problem I'm seeing after optimization is that "jq" is undefined in the "jquery-private.js" file.
Any ideas? I've tried setting jq = $ but that seems to destroy the global.
Thanks.
Here is what I did to get the jQuery CDN & optimization sample linked from the RequireJS jQuery Instructions page to work with the Mapping Modules to use noConflict section that you pasted in your original question.
1 - Forked the sample
2 - Created file www/js/lib/jquery-private.js with this content
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
3 - Modified www/js/app.js to paste the map section so the require.config now looks like this:
requirejs.config({
"baseUrl": "js/lib",
"paths": {
"app": "../app",
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
},
map: {
'*': { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
}
});
4 - Modified www/js/app/main.js to use jqlocal instead of $ (just to prove to myself that it's not the global jQuery:
define(["jquery", "jquery.alpha", "jquery.beta"], function(jqlocal) {
jqlocal(function() {
jqlocal('body').alpha().beta();
});
});
5 - Changed to the tools folder and ran:
node r.js -o build.js
6 - Changed to the www-build folder that was created and ran servedir (doesn't really matter what web server but that's what I use for dev)
7 - Browsed to the local address & port number of the app (in my case http://localhost:8000/app.html) and saw:
Alpha is Go!
Beta is Go!
You can see the end result here
To get this working I changed the way I was using Require (possibly how I should have been doing it all along). This information might prove useful to others, so I thought I'd put it out there.
Previously I was specifying any dependencies in the defined module:
define( [ "dep1", "dep2", "jquery" ], function( var1, var2, jq ) {
This worked fine initially, but failed when optimized. I moved the dependencies to the require function call including this module and it then started to work OK both pre and post optimisation, with jquery being used privately:
require( [ 'jquery', 'dep1', 'dep2' ], function( jq, var1, var2 ) {
formValidator.formValidationInit( jq( el ) );
});
I wouldn't have thought this would have made a difference, but it seemed too.
It is also worth noting that I had to change the jquery-private file as it was still throwing up an issue concerning "jq" not being defined. I am now setting jq equal to the global $ and returning it so it can be used pivately:
define(['jquery'], function () {
var jq = $;
return jq.noConflict( true );
});
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
I am trying to modularize my Backbone app through Requirejs, but I cannot seem to get Requirejs to include Backbone. Here is my main.js that gets included from the index page:
require.config({
baseUrl: '/static/js/',
paths: {
jquery: 'libs/jquery/jquery-min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
text: 'libs/require/text',
},
});
require(['/static/js/views/app.js'], function(AppView) {
var appView = new AppView;
});
Here is my app.js that gets included from the above file:
define([
'jquery',
'underscore',
'backbone',
], function($, _, Backbone) {
console.log($);
console.log(_);
console.log("inside of the app js file");
var AppView = Backbone.View.extend({
initialize: function() {
console.log("inside of appview initialize");
},
});
});
The following information gets printed out in my Google Chrome console:
function (a,b){return new e.fn.init(a,b,h)}
app.js:7undefined
app.js:8inside of the app js file
app.js:9Uncaught TypeError: Cannot read property 'View' of undefined
The definition for $ works, but the definitions for _ and Backbone do not work. They come up as undefined. Any idea why this is happening?
I recommend you use the version of requireJS that has jQuery bundled. It will save you much setup pain. You can read the details here: http://requirejs.org/docs/jquery.html and download the files here: https://github.com/jrburke/require-jquery
In their own words:
With RequireJS, scripts can load in a different order than the order they are specified. This can cause problems for jQuery plugins that assume jQuery is already loaded. Using the combined RequireJS + jQUery file makes sure jQuery is in the page before any jQuery plugins load.
This should take care of loading jQuery properly with requireJS:
<script data-main="js/main" src="js/require-jquery.js"></script>
Main.js
A couple of notes here:
No need to re-define the path to jquery since that's already taken care of
You still have to indicate jquery as a required module
(I had to update the paths to have them work in my system)
Code:
require.config({
baseUrl: 'js/',
paths: {
underscore: 'libs/underscore-min',
backbone: 'libs/backbone-min',
},
});
require(['jquery', 'app'], function($, AppView) {
console.log("done w/ requires");
console.log($)
console.log(AppView)
var appView = new AppView;
});
app.js
A couple notes:
You can only retrieve the JS files after loading them in the callback if they have been defined as modules. So function($, _, Backbone) will fail for you.
You must return your object so that it can be used in the main.js callback (return AppView)
Code:
define(
[
'jquery',
'underscore',
'backbone',
],
function() {
console.log($);
console.log(_);
console.log(Backbone);
console.log("inside of the app js file");
return AppView = Backbone.View.extend({
initialize: function() {
console.log("inside of appview initialize");
},
});
});
Console
With that code in place, this is the console output:
function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} [app.js:8]
function (a){return new m(a)} [app.js:9]
Object [app.js:10]
inside of the app js file [app.js:11]
done w/ requires main.js:21
function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} [main.js:22]
function (){a.apply(this,arguments)} [main.js:23]
inside of appview initialize [app.js:15]
I would shy away from using forked versions of backbone and underscore. A "shim" configuration option has been added to requirejs to handle 3rd party libraries that don't natively support AMD. This makes updating to the latest versions of the libraries much easier.
http://requirejs.org/docs/api.html#config-shim
Here is an example:
require.config({
paths: {
jquery: "libs/jquery",
underscore: "libs/underscore",
backbone: "libs/backbone"
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
You may not have the correct reference backbone and _,may be this can help you：
Loading Backbone and Underscore using RequireJS
more:
http://requirejs.org/docs/api.html#config-shim
I'm attempting to load the Highcharts library using a shim in RequireJS. However, when Highcharts loads, it throws an exception because it can't access the jQuery methods it depends on.
The require config looks like so:
require.config({
baseUrl: "js",
shim: {
'libs/highcharts/highcharts.src.js': {
deps: ['jquery'],
exports: function(jQuery)
{
this.HighchartsAdapter = jQuery;
return this.Highcharts;
}
}
}
});
The exception that is thrown is:
Uncaught TypeError: undefined is not a function
and is in regards to this line:
dataLabels: merge(defaultLabelOptions, {
The issue is the merge call, which eventually maps itself back to jQuery (or some other adapter that Highcharts supports; but I'm just using jQuery).
I'm not sure exactly how to make sure Highcharts gets access to jQuery using RequireJS and shim.
Has anyone used RequireJS and Highcharts together before? I guess the issue isn't specific to highcharts, but any library that has other sorts of dependencies.
Thanks in advance for any advice or points to the correct direction!
To add further context, in hopes that someone who is familiar with require.js or shims will be able to help without having to be too intimately familiar with highcharts, here's some source that sets up this merge method in Highcharts
var globalAdapter = win.HighchartsAdapter,
adapter = globalAdapter || {},
// Utility functions. If the HighchartsAdapter is not defined,
// adapter is an empty object
// and all the utility functions will be null. In that case they are
// populated by the
// default adapters below.
// {snipped code}
merge = adapter.merge
// {snipped code}
if (!globalAdapter && win.jQuery) {
var jQ = win.jQuery;
// {snipped code}
merge = function () {
var args = arguments;
return jQ.extend(true, null, args[0], args[1], args[2], args[3]);
};
// {snipped code}
}
The win object is a reference set up to window at the beginning of the script. So, I thought adding window.jQuery = jQuery; to the export method on the shim would result in highcharts picking up the jQuery reference; but it didn't.
Again, any insight, info, advice, or heckles would be appreciated at this point - I'm at a complete loss, and starting to question whether trying to implement and AMD package system in browser javascript is even worth it.
After accepting the answer from pabera below I thought it appropriate to update my question to reflect how his answer helped my solution (though, it's basically his answer).
RequireJS uses "paths" to find libs that aren't "AMD" supported and loads them on your page. the "shim" object allows you to define dependencies for the libraries defined in paths. The dependencies must be loaded before requirejs will try to load the dependent script.
The exports property provides a mechanism to tell requirejs how to determine if the library is loaded. For core libs like jquery, backbone, socketio, etc they all export some window level variable (Backbone, io, jQuery and $, etc). You simply provide that variable name as the exports property, and requirejs will be able to determine when the lib is loaded.
Once your definitions are done, you can use requirejs' define function as expected.
Here's my example require.config object:
require.config({
baseUrl: "/js/",
paths: {
jquery: 'jquery',
socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library
highcharts: 'libs/highcharts/highcharts.src',
underscore: 'libs/underscore',
backbone: 'libs/backbone'
},
shim: {
jquery: {
exports: 'jQuery'
},
socketio: {
exports: 'io'
},
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
highcharts: {
deps: ['jquery'],
exports: 'Highcharts'
}
}
});
As pabera mentioned before, this is for Require.JS version 2.0.1.
I hope someone gets some use out of this; I know it road blocked me for a little while; so hopefully we kept you from banging your head into the same spot in the wall that we did, by posting this.
I had the exact same problem and I was struggling around many hours until I saw your entry here. Then I started over from scratch and now it works for me at least.
requirejs.config({
baseUrl:'/js/',
paths:{
jquery:'vendor/jquery',
handlebars: 'vendor/handlebars',
text: 'vendor/require-text',
chaplin:'vendor/chaplin',
underscore:'vendor/underscore',
backbone:'vendor/backbone',
highcharts: 'vendor/highcharts'
},
shim: {
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
underscore: {
exports: '_'
},
highcharts: {
exports: 'Highcharts'
}
},
});
Since I use Chaplin on top of Backbone, I am including some more files in my paths attribute. Highcharts has a similar structure to Backbone so I thought I could load it the same way. It works for me now. As you can see, I am introducing highcharts in the paths attribute already to export it as a shim afterwords.
Maybe this helps, otherwise let's try to contribute on it even more to solve your problem.
Although jQuery can be used as an AMD module it will still export itself to the window anyway so any scripts depending on the global jQuery or $ will still work as long as jQuery has loaded first.
Have you tried setting a path? jQuery is an interesting one because although you're encoruaged not to name your modules by the RequireJS documentation, jQuery actually does.
From the jQuery source
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
What that means is you will need to tell RequireJS where to find 'jquery'. So:
require.config({
paths: {
'jquery': 'path/to/jquery'
}
});
If you're interested in why jQuery registers itself this way then there is a pretty large comment in the source which goes into more detail