Marionette.js Require.js Template Path Error - javascript

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' );
});

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.

requirejs include multiple extensions for jquery control

How do you load other extensions for a jquery control called 'fancytree' I'm trying to get fancytee to load or include the fancytree.table.js and other extensions that are needed - below is my config
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'jquery-ui': {
exports: "$",
deps: ['jquery']
},
'fancytree': {
deps: ['jquery-ui']
},
'alertify': {
deps: ['jquery']
},
'fancytreetable': {
deps: ['jquery', 'fancytree']
}
},
paths: {
'jquery': '../lib/jquery/jquery',
'underscore': '../lib/underscore/underscore',
'backbone': '../lib/backbone/backbone',
'text': '../lib/text/text',
'jquery-ui': '../vendor/jquery-ui/jquery-ui',
'fancytree': [
'../vendor/fancytree/fancytree',
'../vendor/fancytree/fancytree.table'/* this extension here needs to be added but it's not included */
],
'alertify': '../vendor/alertify/alertify'
},
baseUrl: '/js/app',
});
Nikhil Mehta's comment points you in the right direction. Your paths value for fancytree is wrong. You use an array there when you want to provide fallback values for modules. If you give [A, B, C], for instance, if A fails to load, RequireJS tries B and if this fails, tries C. And if all fail, then that's a load failure.
Based on the configuration you show, you'd need:
fancytree: '../vendor/fancytree/fancytree',
fancytreetable: '../vendor/fancytree/fancytree.table'
You already have a shim that establishes that fancytreetable needs fancytree.
Note that unless you are using fairly old versions of Underscore and Backbone, you do not need to specify shim values for them. RequireJS is probably going to just ignore them but it may confuse people reading your code.
Here is how made it work, requirejs with jquery.fancytree-all and latest jquery-ui with AMD support, since working with individual extensions will require a lot of shimming.
onBuildWrite is optional but i prefer it this way
requirejs.config({
paths: {
'jquery': './js/vendor/jquery',
'jquery-ui': './js/vendor/jquery-ui',
'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
},
shim: {
'jquery.fancytree': {
deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
exports: 'jQuery.fn.fancytree'
}
},
onBuildWrite: function (moduleName, path, contents) {
'use strict';
if (moduleName === 'jquery.fancytree') {
contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
}
return contents;
}
});
// usage
define([
'jquery',
'jquery.fancytree',
'css!./css/fancytree/skin-custom/ui.fancytree.css',
],
function($) {
'use strict';
//
$('#tree').fancytree({
checkbox: true,
source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
});
//
});
//

What's the correct way to load Marionette (v3) with RequireJS?

I searched in vain all over Google on how to load Marionette v3-pre.4 - latest version until now (July 2016) - with RequireJS.
The bundled version of the library seems to be broken for RequireJS so I have to manually include "backbone.babysitter" and "backbone.radio" which are required for this version of Marionette.
According to: versioneye.com I need:
"backbone.babysitter" 1.0.0-pre.1 and
"backbone.radio" * 2.0.0-pre.1*
So I tried installing them with Bower:
bower install backbone.babysitter
It returned:
Unable to find a suitable version for backbone.babysitter, please choose one by typing one of the numbers below:
1) backbone.babysitter#^0.1.12 which resolved to 0.1.12
2) backbone.babysitter#1.0.0-pre.1 which resolved to 1.0.0-pre.1 and is required by marionette#3.0.0-pre.4
Prefix the choice with ! to persist it to bower.json
I selected the 2nd one like this:
? Answer !2
It returned:
bower resolution Saved backbone.babysitter#1.0.0-pre.1 as resolution
I did exactly the same with backbone.radio:
bower install backbone.radio
Returned:
Unable to find a suitable version for backbone.radio, please choose one by typing one of the numbers below:
1) backbone.radio#^1.0.5 which resolved to 1.0.5
2) backbone.radio#2.0.0-pre.1 which resolved to 2.0.0-pre.1 and is required by marionette#3.0.0-pre.4
Prefix the choice with ! to persist it to bower.json
Selected:
? Answer !2
Returned:
bower resolution Saved backbone.radio#2.0.0-pre.1 as resolution
Everything seemed to be ok, but when I checked the version for these two libraries in each's "bower.json" file, I found out that:
backbone.babysitter is at:
"name": "backbone.babysitter",
"version": "0.1.11"
and backbone.radio:
"name": "backbone.radio",
"version": "1.0.4"
Where did I go wrong?
This is my bower.json:
{
"name": "Example App",
"authors": "Consta Gorgan",
"dependencies": {
"backbone": "~1.2.3",
"backbone.radio": "~2.0.0",
"backbone.babysitter": "~1.0.0",
"marionette": "~3.0.0",
"requirejs": "~2.1.15",
"requirejs-plugins": "~1.0.2"
},
"resolutions": {
"backbone.radio": "2.0.0-pre.1",
"backbone.babysitter": "1.0.0-pre.1"
}
}
This is my shim file:
requirejs.config({
paths: {
jquery: '../bower_components/jquery/dist/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone',
'backbone.radio': '../bower_components/backbone.radio/build/backbone.radio',
'backbone.babysitter': '../bower_components/backbone.babysitter/src/build/backbone.babysitter',
marionette: '../bower_components/marionette/lib/core/backbone.marionette'
},
shim: {
jquery: {
exports: '$'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone', 'backbone.radio', 'backbone.babysitter' ],
exports: 'Marionette'
}
}
})
And this is how I load modules with RequireJS in my app.js file:
define([
'jquery',
'underscore',
'backbone',
'marionette',
'router'
], function ($, _, Backbone, Marionette, Router) {
'use strict'
var init = function () {
Router.init()
}
return {
init: init
}
})
Aaand this is the error I keep getting in my browser:
And this one after a few more seconds:
Instead of ../bower_components/backbone.babysitter/src/build/backbone.babysitter use ../bower_components/backbone.babysitter/lib/backbone.babysitter
If anyone runs into this, v3.0 changed to remove babysitter
requirejs.config({
paths: {
jquery: 'node_modules/jquery/dist/jquery',
underscore: 'node_modules/underscore/underscore',
backbone: 'node_modules/backbone/backbone',
'backbone.radio': 'node_modules/backbone.radio/build/backbone.radio',
marionette: 'node_modules/marionette/lib/backbone.marionette'
},
shim: {
jquery: {
exports: '$'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'backbone.radio': {
deps: [
'underscore',
'backbone'
],
export: 'Radio'
}
underscore: {
exports: '_'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone', 'backbone.radio' ],
exports: 'Marionette'
}
}
});

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

RequireJS not loading from paths confing

I have the following main.js
requirejs.config({
baseUrl: 'js',
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'marionette': {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Marionette'
},
'underscore': {
exports: '_'
}
}
});
The code to require query:
define(['jquery', 'backbone', 'marionette'], function($, Backbone, Marionette) {
Backbone, marionette and underscore all load correctly, but requireJS is ignoring the 'paths' config and trying to load jquery from js/jquery.js, not the CDN.
Using requires 2.1.9
You should exclude the ".js" extension from the CDN URL, just as you would for file paths in your baseUrl directory:
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min"
},

Categories