Develop Reference

Applying RequireJS to a modular one page application

I actually have two questions concerning requirejs and singleton objects. I want to form a singleton object playing the role of my application core and pass it to modules as a parameter. How should this be done?
The other issue I have is related to a private object inside the application core. It's suppose to act as a container for modules but for some reason when I try to start the application, this container seems to have those modules but it can't be looped through. Any ideas why this is happening?
Here's an example code of the situation:
// applicationConfig.js
require.config({
baseUrl: 'js',
paths: {
jquery: 'jquery-3.1.1.min',
core: 'utils/applicationCore',
domReady: '../lib/domReady'
}
});
require(['modules']);
// modules.js
define(['core', 'domReady'], function(Core, domReady) {
require([
'modules/module1'
]);
domReady(function() {
var modules = Core.getModules();
var name = '';
for (name in modules) {
modules[name].creator(); // Start a module...
}
});
});
// applicationCore.js
define(function() {
return (function() {
var _modules = {};
return {
add: function(name, creator) {
_modules[name] = {
creator: creator
};
},
getModules: function() {
return _modules;
}
}
}());
});
// module1.js
define(['core', 'jquery'], function(Core, $) {
Core.add('module1', function() {
// Module constructor function.
});
});

RequireJS issues while loading and Hamljs

I am using requirejs + jquery + sammy.js + hamljs.
The template engine haml is not working : it runs sammy.haml, but Haml is defined for main.js but not for sammy.haml and cannot run in it. After the page is completely loaded, Haml exists for the console. Why Sammy does not get on well with HAML whereas it should be ?
requirejs.config({
baseUrl: '../../components/',
paths: {
dropkick: 'jquery-dropkick2/jquery.dropkick-1.0.0',
Ladda: 'Ladda/dist/ladda.min',
'jquery-autosize': 'jquery-autosize/jquery.autosize',
mixitup: 'mixitup/jquery.mixitup.min',
jquery: 'jquery/jquery',
sammy: 'sammy/lib/sammy',
'sammy.haml': 'sammy/lib/plugins/sammy.haml',
haml: 'haml/lib/haml',
browser: 'jquery.browser/jquery.browser.min'
},
shim: {
dropkick: {
deps: ['jquery']
},
browser: {
deps: ['jquery']
},
'sammy.haml': {
deps: ['haml']
}
}
});
requirejs(['jquery', 'haml'], function($, Haml) { // They are to be loaded first
requirejs(['sammy', 'sammy.haml', 'browser', 'markdown'], function(sammy, shaml, markdow) { // Then the others
console.log(Haml); // WORK
var app = sammy('#main', function() {
var self = this;
self.use(sammy.Haml);
self.get('/upload', function(context) {
context.app.swap('');
var s = context.render('app/templates/upload.haml', {});
s.appendTo(context.$element())
});
});
});
app.run();
});
});

Finally found the solution ! I defined window.Haml = haml in the main file, and modified sammy.haml.js to get window.Haml function instead of Haml function.

Unable to call function while using requirejs

I have been working on a new project for sometime and recently started using require.js in the project.
It all seemed to work fine until I tried making a call from application.js to dashboard.js when the tab #dailyTab or #weeklyTab was clicked or access varialbe var a in dashboard,js. My code is below
main.js
requirejs.config({
baseUrl : '../static/js/',
paths : {
'jquery' : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
'jquery-ui' : 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min',
'bootstrap' : ['//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min', 'bootstrap.min'],
},
shim : {
'bootstrap' : ['jquery'],
'bootswatch' : ['bootstrap'],
}
});
require(["jquery", "jquery-ui", "bootstrap", "dashboard", "application"], function($, jui, bootstrap, dashboard, application) {
$("#myTab a:first").tab("show");
}, function(err) {
console.log(err)
});
dashboard.js
define(function() {
var a = 10;
var Reload = {
dailyCharts : function() {
console.log("Daily Charts");
},
weeklyCharts : function() {
console.log("Weekly Charts");
}
};
var Display = {
none : function(node) {
console.log("none");
},
block : function(node) {
console.log("block");
}
}
});
application.js
define(["jquery", "dashboard"], function(jquery, dashboard) {
$("#dailyTab").click(function() {
dashboard.Reload.dailyCharts();
});
$("#weeklyTab").click(function() {
dashboard.Reload.weeklyCharts();
});
});
Can someone tell me what I have done wrong or what I can do to fix this issue. I accept my coding skills is not very good.
Any help on this is much appreciated.
Thanks in advance

Well, your dashboard.js didn't return anything. How would application.js use it?
define(function() {
var a = 10;
var Reload : {...};
var Display : {...};
//return the interface
return {
Reload : Reload,
Display : Display
}
});

Making Backbone.js modular with Require.js

I am attempting to make my Backbone.js components, models and views modular through Backbone.js. However whenever I attempt to require() one it returns:
function (){return i.apply(this,arguments)}
instead of the Backbone wizardry I require.
I have set up my Require.js like so:
// Configure require.js
require.config(
{
paths: {
"data": "config"
, "jquery": "libs/jquery.min"
, "underscore": "libs/underscore-min"
, "backbone": "libs/backbone-min"
, "events": "collections/events"
, "eventModel": "models/eventModel"
, "eventView": "views/eventView"
}
, shim: {
underscore: {
exports: '_'
}
, jquery: {
exports: '$'
}
, backbone: {
deps: ["underscore"]
, exports: "Backbone"
}
}
}
);
// Initiate app
require(
[
"data"
, "jquery"
, "underscore"
, "backbone"
, "events"
, "eventModel"
, "eventView"
], function(data, $, _, Backbone, Events, EventModel, EventView) {
console.log(Events);
_.each(["data/general.xml"], function(URI) {
var general = new Events({url: URI});
});
}
);
And here is my collections/events.js:
define(
[
"backbone"
, "eventModel"
]
, function(Backbone, EventModel) {
"use strict";
var Events = Backbone.Collection.extend({
model: EventModel
, parse: function(data) {
var parsed = [];
$(data).find('Event').each(function(index) {
parsed.push({
title: $(this).find('title').text(),
date: $(this).find('date').text(),
content: $(this).find('content').text()
});
});
return parsed;
}
, fetch: function(options) {
options = options || {};
options.dataType = "xml";
Backbone.Collection.prototype.fetch.call(this, options);
}
});
return Events;
}
);
I would expect that to return the Events collection, however it clearly isn't. Can anyone see what I am doing wrong?

Everything seems fine. What you see:
function (){return i.apply(this,arguments)}
is the constructor of your class. Pay no attention to it. Instead, try to log new myClass.
Edit:
You don't see any of the methods because they're stored in the prototype of your class. The i function that is called is the "real" constructor (named i because it's been minified).

TypeError: this.parts[1].reviewMoment is not a function

I am working on this bug and I keep getting the following error -
TypeError: this.parts[1].reviewMoment is not a function
I am using jQuery and backbone. Unfortunately, I'm not really familiar with JS and not sure why this line broke.
define([
"jquery",
"underscore",
], function($, _) {
reviewMoment: function(place) {
this.collection.bind("add", _.once(_.bind(this.triggerReview, this)));
this.collection.addMomentByPlace(place);
},
triggerReview: function() {
this.parts[(this.matchView ? 2 : 1)].reviewMoment();
if(this.matchView) {
this.matchView.search.close();
}
}
});
});
Why is reviewMoment not considered a function?
Thanks.

It's not a function because you're not actually creating an object literal {} in which you can use the identifier:property notation. To create valid function definitions place a return statement with an object literal around your functions:
define([
"jquery",
"underscore",
], function($, _) {
return {
reviewMoment: function(place) {
this.collection.bind("add", _.once(_.bind(this.triggerReview, this)));
this.collection.addMomentByPlace(place);
},
triggerReview: function() {
this.parts[(this.matchView ? 2 : 1)].reviewMoment();
if(this.matchView) {
this.matchView.search.close();
}
}
}
});
});