loading backbone plugins with requirejs - javascript

I was wondering how I could load backbone plugins with require.js I currently have this in my main.js
(function() {
'use strict';
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
deepModel: {
deps: ['underscore', 'backbone']
}
},
paths: {
jquery: 'lib/jquery/jquery',
underscore: 'lib/underscore/underscore',
backbone: 'lib/backbone/backbone',
text: 'lib/requirejs-text/text',
deepModel: 'lib/deep-model/deep-model.min'
},
In my model I have something like this
var myapp = myapp|| {};
(function() {
'use strict';
define([
'jquery',
'underscore',
'backbone',
'deepModel',
], function($, _, Backbone) {
myapp.model= new Backbone.DeepModel.extend({
defaults: {
},
urlRoot: '/users',
For some reason the above does not seem to work as expected. I think I am missing something but not sure what that is. I am using the backbone deep model plugin.
This is the error I get in the debugger
Uncaught TypeError: Object [object Object] has no method 'apply'

Add DeepModel to your scope in function signature:
define([
'jquery',
'underscore',
'backbone',
'deepModel',
], function($, _, Backbone, **DeepModel**)

It might make your life easier if you use the AMD-compatible version of backbone and underscore. By default, they do not support AMD.
https://github.com/amdjs/backbone
https://github.com/amdjs/underscore

Related

How to use Handlebars with RequireJS

I encountered the following error:
Uncaught TypeError: Cannot call method 'compile' of undefined.
RequireJS configuration:
requirejs.config({
baseUrl: "resources",
paths: {
'app':'lib',
'jquery': 'lib/jquery-1.9.1',
'bootstrap': 'lib/bootstrap',
'html5shiv': 'lib/html5shiv',
'spin': 'lib/spin',
'respond': 'lib/respond',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone',
'handlebars': 'lib/handlebars-v3.0.3',
'template': 'app/templates'
},
shim: {
html5shiv: {
deps: ['jquery']
},
respond: {
deps: ['jquery']
},
bootstrap: {
deps: ['jquery']
},
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
handlebars: {
exports: "Handlebars"
}
}
});
require([
'jquery',
'underscore',
'backbone',
'handlebars',
'app/Router'
], function($,
_,
Backbone,
Handlebars,
Router) {
var router = new Router();
Backbone.history.start();
});
View:
define([
'backbone',
'handlebars',
'text!templates/mytemplate.html'
], function(Backbone, Handlebars, Template){
MyView = Backbone.View.extend({
tagName: 'li',
template: Handlebars.compile(Template),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
return MyView;
});
shim is for libraries that doesn't support AMD. The version of handlebars you're using probably supports AMD and doesn't define a global variable named Handlebars. Hence you get the error. Try removing handlebars config from shim.

Require.js/Jquery Datable : undefined is not a function

I am trying to load JQuery datatables with Require.js
This is my JS module where I would like to use datatables :
define([
"jquery",
"text!orders_list.tpl",
"dataTables"
], function($, OrdersListTemplate, dataTables)
{
console.log($);
console.log($.fn.dataTable);
... more logic after
How I call my JS module in HTML :
require(['./js/config'], function (common)
{
require(
[
'js/modules/init',
...
'js/modules/orders_list.js'
],
function (init, ..., orders_list)
{
init.initialize();
...
orders_list.initialize();
});
});
How I have defined my config :
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
...
},
paths: {
jquery: '../../shops_common/js/lib/jquery-1.9.1',
backbone: '../../shops_common/js/lib/backbone.min',
underscore: '../../shops_common/js/lib/underscore.min',
dataTables: 'http://datatables.net/download/build/nightly/jquery.dataTables'
},
waitSeconds: 300
});
But $.fn.dataTable is always undefined...
Any idea why?
Thanks.
I found the solution after extensive research: Datatables is a named module you must use the name "datatables" in your require

Marionette.js Require.js Template Path Error

I have the following directory structure to my tpl:
-src
-assets
-js
-lib
[files]
-src
-templates
-common
builder_regions.tpl
My require.config is:
require.config({
baseUrl:'src/assets/js',
paths: {
backbone: 'lib/backbone',
jquery: 'lib/jquery.min',
'jquery-ui': 'lib/jquery-ui-1.10.4.custom.min',
underscore: 'lib/underscore.min',
modernizr: 'lib/modernizr.min',
'magnific-popup': 'lib/magnific-popup.min',
text: 'src/assets/jslib/text',
marionette: 'lib/backbone.marionette.min',
tpl: 'lib/underscore-tpl'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: [ 'jquery', 'underscore' ],
exports: 'Backbone'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone' ],
exports: 'Marionette'
},
'jquery-ui': {
deps: [ 'jquery' ],
exports: '$ui'
},
'magnific-popup': {
deps: [ 'jquery' ],
exports: 'magnificPopup'
},
tpl: [ 'text' ]
}
});
My require module is set-up as:
define([ 'tpl!src/templates/common/builder_regions.tpl', function( Marionette, layoutTpl ) {
console.log( 'did not throw' );
});
When I access the module I get the following error:
GET http://localhost:3000/src/assets/js/src/tpl.js 404 (Not Found)
Why is file tpl.js being referenced when I provided the path in require.config? Thanks!
If your underscore-tpl.js is this one then you do not need a shim configuration for it because it calls define by itself. If you use a shim configuration for something that does not need a shim, RequireJS can behave strangely.
Another thing not related to the problem you are reporting here but could give you trouble down the line: jQuery has not needed a shim since at least version 1.9. So if you use a version that is >= 1.9, you should remove the shim you have for jquery.
Try This:
define(['marionette', 'tpl!src/templates/common/builder_regions.tpl'], function( Marionette, layoutTpl ) {
console.log( 'did not throw' );
});

backbone loaded with requirejs shim but still Backbone undefined error

I've read many answers and followed steps I could ( seems right to me) but still DevTools shows Backbone is not defined. error.
Here's how I use requirejs shim.
<script data-main="js/subject_main.js" src="js/libs/require.js"></script>
subject_main.js
require.config({
paths: {
bootstrap: '../libs/bootstrap.min',
jquery: '../libs/jquery',
underscore: '../libs/underscore',
backbone: '../libs/backbone',
text: '../libs/text',
json2: '../libs/json2',
templates: '../../templates'
},
shim: {
'boostrap':{
deps: ['jquery']
},
'backbone': {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
}
}
});
require(['subjects', 'json2'], function(app) {
app.initialize();
});
subjects.js
define(['jquery', 'underscore', 'backbone', 'subject_router'], function($, _, Backbone, router) {
return {
initialize: function() {
Backbone.history.start();
}
};
});
subject_router
define([
'jquery',
'underscore',
'backbone',
'models/subject_item_model',
'collections/subjects_collection',
'views/subject_view'
],function($, _, Backbone) {
var AppRouter = Backbone.Router.extend({ ... });
return new AppRouter();
});
Chrome DevTools shows following sequence (order ) of scripts -
As you can see, backbone is loaded at very end. I don't know what's going wrong and where.
backbone.js or underscore.js look fine to me here, and indeed they are being loaded!
The 404s in your dev tool are referring to the source mapping files (underscore.min.map). You might want to look at this post: Missing Javascript ".map" file for Underscore.js when loading ASP.NET web page.
PS: In your subject_router code you have a mismatch on the arguments passed in to the module function.

Unable to get Masonry working with RequireJS

I'm trying to get Masonry loaded into my app using RequireJS, but it keeps causing backbone to spit out a "object is not a function" error anytime I add it.
Edit: possibly related to this issue.
main.js
require.config({
paths: {
jquery: 'lib/jquery-1.9.1',
underscore: 'lib/underscore-1.5.2',
backbone: 'lib/backbone-1.0.0',
masonry: 'lib/masonry.pkgd'
},
shim: {
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['app'], function(App){
App.initialize();
});
app.js
define([
'jquery',
'underscore',
'backbone',
'masonry',
'collections/ideas',
], function($, _, Backbone, Masonry, IdeasCollection) {
var IdeasView = Backbone.View.extend({
el: $('#container'),
initialize: function() {
...
},
render: function(){
...
}
});
return IdeasView;
});
To use Masonry as a jQuery plugin with RequireJS, you’ll need to run jQuery bridget.
Check the documentation:
http://masonry.desandro.com/appendix.html#requirejs
You can download bridget here:
https://github.com/desandro/jquery-bridget
Then you can include an run bridget and it should work fine
define([
'jquery'
, 'underscore'
, 'backbone'
, 'config'
, 'app'
, 'jquery.masonry'
, 'jquery.bridget'
], function ($, _, Backbone, Config, App, Masonry, bridget) {
initialize : function () {
bridget('masonry', Masonry);
}
});
Hope it helps!
This is one way you can run it without bridget:
requirejs-config.js:
var config = {
paths: {
"lib-masonry": "Module/js/lib/masonry.pkgd.min"
},
shim: {
"lib-masonry": {
deps: ['jquery', 'jquery/ui']
}
}
}
and then in another module where you want to use it:
define([
'jquery',
'lib-masonry'
], function ($, Masonry) {
$.widget('ModuleNamespace.containerMasonry', {
options: {
},
_create: function() {
var msnry = new Masonry('.grid', {
itemSelector: '.grid__item',
columnWidth: 200
});
// .. code
}
});
return $.ModuleNamespace.containerMasonry;
});

Categories