I am learning backbone.js and use require.js to make a modular app.
I've got it working on every browser except IE8 where I get some major errors and a blank, white page.
Here is the link to the app, open it in IE8 and see the error.
I have no idea what to do, I have searched and searched and I need help in making it work.
Any ideas?
Here are the errors:
SCRIPT445: Object doesn't support this action
jquery.min.js, line 4 character 29137
SCRIPT5007: Object expected
backbone-min.js, line 1 character 17010
And here is my main.js file:
// file: main.js
require.config({
paths: {
"jquery" : "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min",
"underscore" : "http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min",
"backbone" : "http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min",
"text" : "http://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text"
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
text : {
exports : 'text'
}
}
});
require(['app'], function (App) {
App.initialize();
});
You're using jQuery 2.x, which does not support IE8. Try using jQuery 1.10 instead. Details on jquery..com
Related
I want to use form2js to convert a form's info to json to post. The problem is, the framework I am using uses require.js and it seems like I am not linking the form2js file with the requirejs config properly. I am getting an
Uncaught ReferenceError: form2js is not defined
error.
form2js is a function within the form2js.js file.
Here is the config file:
require.config({
baseUrl: "assets/js/lib/"
, shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'bootstrap': {
deps: ['jquery'],
exports: '$.fn.popover'
},
'form2js': {
exports: 'form2js'
}
}
, paths: {
app : ".."
, collections : "../collections"
, data : "../data"
, models : "../models"
, helper : "../helper"
, templates : "../templates"
, views : "../views"
}
});
require([ 'app/app'], function(app){
app.initialize();
});
And in the main html page I run this:
<script data-main="assets/js/main.js" src="assets/js/lib/require.js" ></script>
Any guidance to the right resources would be very appreciated!
Including form2js in require.config just tells it where to find the form2js module (and other information, like it's dependencies, etc.)
To actually load form2.js you have (and hence define the form2js global), you have to list it as a dependency in the module where you are using it.
For example assuming your initialize() function uses it, your last statement would be
require([ 'app/app', 'form2js' ], function(app){
app.initialize();
});
Note - if app/app.js uses form2js, you have to include it in the define for that module. You might also want to check (in your browser developer tools network tab if form2.js was actually loaded, once you list it as a dependency somewhere)
I'm trying to load textext.js jquery plugin, with one of it's plugins, textext tags. On my project, I'm using require.js in order to load all scripts with it's dependencies.
As used for other scripts, I'm using a shim config on my main.js file:
main.js
require.config({
shin: {
jquery: {
exports: '$'
},
'textext': {
deps: ['jquery'],
exports: '$.fn.textext'
},
'textext_tags': {
deps: ['jquery', 'textext'],
}
},
paths: {
jquery: 'lib/jquery-min',
textext: 'lib/textext/textext.core',
textext_tags: 'lib/textext/textext.plugin.tags',
}
});
On the page that I use it, I call it as above:
file-app.js
define([
'jquery',
'textext',
'textext_tags',
], function($, Textext, TextextTags) {
// do stuff
});
The code is loading and working correctly on firefox, but on Chromium, sometimes (about 2/3 of the times), at the first time that I load the page, I've receive the following error, that broke the functioning of the page:
TypeError: Cannot set property 'TextExtTags' of undefined
#3 localhost/js/lib/textext/textext.plugin.tags.js:23:27
Inside the file textext.plugins.tags.js, we have at line 23 (the failure line):
$.fn.textext.TextExtTags = TextExtTags;
So, inspecting it with Firebug, I realize that Jquery is not loaded, so $ and $.fn is undefined.
My question is: why this schema of require.js is working with other jQuery plugins on the same project (like jquery cookie and others), but not with this, a jquery plugin with it's subplugins?
As Vishwanath said, only changing from "shin" to "shim" worked, like above:
require.config({
shim: {
jquery: {
exports: '$'
},
...
Thanks!
I'm creating a web application using Backbone.js and Handlebars.js (with Underscore.js and jQuery as dependencies for Backbone). I'm loading modules for the app with requirejs.
Following the instructions here:
http://requirejs.org/docs/jquery.html#noconflictmap
and here:
http://requirejs.org/docs/api.html#config
So my requirejs config looks like:
map: {
'*' : { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
'underscore' : {
exports: '_',
init: function() { return this._.noConflict(); }
},
'backbone' : {
deps: ['underscore', 'jquery'],
exports: 'Backbone',
init: function(_, $) {
// need to manually set Backbone.$ since it looks for it on the global object
this.Backbone.$ = $;
return this.Backbone.noConflict();
}
},
'handlebars' : { exports: 'Handlebars' }
}
I'm loading local copies of my dependencies by calling noConflict() on backbone, underscore, and jquery. However, Handlebars does not have a noConflict method; if I attempt to configure the shim for it in the same way as backbone & underscore, I get an error:
Uncaught TypeError: Object #<c> has no method 'noConflict'
No real surprise there, but then I'm concerned about conflicts! Is there a workaround? Can I somehow manually achieve the same goal by writing my own version of the noConflict for Handlebars? What would that look like?
As I understand, purpose of noConflict is to release some namespace (or, in other words, global variable). I think, you could accomplish it in following way:
Add to Handlebars some fake dependency (it may be simple AMD module,
written by yourself)
in Handlebars shim config, use init option in following way:
handlebars : {
deps: ['myFakeModule'],
init: function(myFakeModule) {
myFakeModule.Handlebars = this.Handlebars;
this.Handlebars = undefined;
return myFakeModule.Handlebars;
}
}
This is a theory and a bit hacky, but it might do the trick.
I'm having a lot of troubles with RequireJS, I get errors simply by using a define module.
Let's assume I have this configuration:
require.config({
baseUrl: "js/",
paths: {
jquery: "libs/jquery/jquery-2.0.2.min",
handlebars: "libs/backbone/template/handlebars",
lodash: "libs/backbone/template/lodash.min",
backbone: "libs/backbone/backbone-1.0.0.min",
helper:"app/helper",
jquery_cookie:"libs/jquery/plugin/jquery.cookie",
text:"libs/require/text-2.0.7"
},
shim: {
"lodash": {
exports: '_'
},
"handlebars": {
deps:["jquery"],
exports: 'Handlebars'
},
"backbone": {
deps: ["helper", "lodash", "handlebars", "jquery"],
exports: "Backbone"
}
},
urlArgs: "bust=" + (new Date()).getTime()
});
define(["jquery"], function ($) {
console.log('define "jquery" on config.js');
return $;
});
console.log("end config.js");
First, I've tried the classic way, I've loaded a config file where I have all the dependances of my JavaScript files, I'm using jQuery, Backbone and other libs.
<script type="text/javascript" data-main="config" src="js/libs/require/require-2.1.6.min.js"></script>
<script type="text/javascript">
require(["jquery"], function ($) {
console.log("jquery loaded");
});
</script>
With this configuration, i get these errors and logs sequence:
Uncaught Error: Mismatched anonymous define() module: function (){return r}
> http://requirejs.org/docs/errors.html#mismatch
end config.js
define "jquery" on config.js
It seems the error is referred to the function require.config(...);
I thought it was a load problem, so I've tried to use the var require as described in RequireJS site without solving it.
The absurd thing is I'm working on a fullscreen app built in Backbone with the same configuration without getting any problem, here I need to work more with different views and I cannot start, basically the whole difference is here I'm using CakePHP.
Why this won't work, where I'm wrong?
The jQuery version you are using already has AMD support. So you don't have to use shim for it. You can directly give the path and start using it.
Since the module is already defined in the jQuery library, it throws errors when you try to redefine it. The following code tries to define an anonymous module.
define(["jquery"], function ($) {
console.log('define "jquery" on config.js');
return $;
});
remove the above code and should work fine. The following code uses require method to load the jquery module.
require(["jquery"], function ($) {
console.log($(document));
});
Hopefully this works.
So I'm working with jquery.flot and jquery.flot.selection and since define({... loads modules asynchronously I am having a problem because the selection plugin is trying to push itself into $.plot.plugins (which is created by jquery.flot) but at that moment $.plot.plugins still isn't defined.
I found that the "shim" argument in require.config should help me with this but I am having no luck...
so here's the rundown...
jquery.flot creates $.plot
and jquery.flot.selection adds itself to $.plot.plugins
what I've tried...
shim:{
'js/lib/jquery.flot':{
exports:'$.plot'
},
'js/lib/jquery.flot.selection':{
deps:['js/lib/jquery.flot']
}
}
also
shim:{
'js/lib/jquery.flot.selection':['js/lib/jquery.flot']
}
my plugin looks like this..
define(['jquery','lib/jquery.flot','lib/jquery.flot.selection'], function() {
(function($) {
// jQuery plugin definition
.....
I also tried
define(['jquery'],function(){
require[('js/lib/jquery.flot.selection'],function(){
//jQuery plugin definition
...
What should I do???
For anyone who happens to run into this in the future, RequireJS can be a little opaque when it comes to diagnosing problems. Here's a working example of RequireJS 2 with jquery.flot and jquery.flot.selection, without the use module.
It's a little hard to tell what's different between this example and the question above, thus the opaqueness!
require.config({
shim: {
'jquery': {
exports: '$'
},
'jquery.flot': {
deps: ['jquery'],
exports: '$.plot'
},
'jquery.flot.selection': {
deps: ['jquery.flot']
}
},
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
'jquery.flot': '//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min',
'jquery.flot.selection': 'https://raw.github.com/flot/flot/master/jquery.flot.selection'
}
});
require(['jquery', 'jquery.flot', 'jquery.flot.selection'], function ($) {
// jQuery plugin definition
console.log($.plot);
$('#x').text($.plot.plugins);
});