Suppose I have a module that starts like the following:
define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../templates/requestRow.html!strip', 'text!../templates/respondForm.html!strip'], function($, actions, util, tDialog, tRequestRow, tRespondForm) {
This module contains most of the code for writing to my client UI. It also loads a couple other modules I've written as well as 3 HTML templates using the text.js plugin. I'm wondering if there's a more concise way of doing this? As the application grows, I may have additional templates to load, or modules and it just seems like my define statement could grow to be a bit ugly. Should I just add my template paths to require.config in my main.js like this:
require.config({
baseUrl: '/webrequests/resources/scripts/',
paths: {
'modernizr': '../js/vendor/modernizr-2.6.2-respond-1.1.0.min',
'bootstrap' : '../js/vendor/bootstrap.min',
'dialog' : 'text!../templates/dialog.html!strip',
'requestRow' : 'test!../templates/requestRow.html!strip',
'respondForm' : 'text!../templates/respondForm.html!strip'
}});
Is there perhaps some way to load all templates within a directory and just have 1 dependency to include in the define statement?
Thanks in advance.
You could make a module for loading in the templates you frequently use. So group the templates to be loaded in one module, that way you can just load this template module instead of the individual templates:
// generalTemplates.js
define([
'text!../templates/dialog.html!strip',
'text!../templates/requestRow.html!strip',
'text!../templates/respondForm.html!strip'
], function (tDialog, tRequestRow, tRespondForm) {
return {
dialog: tDialog,
requestRow: tRequestRow,
respondForm: tRespondForm
};
});
So that in your module, you can simply include the templates like any other module:
define([
'jquery',
'actions',
'util',
'generalTemplates'
], function($, actions, util, templates) {
var tDialog = templates.dialog,
tRequestRow = templates.requestRow,
tRespondForm = templates.respondForm;
/* You can do stuff with the templates here */
});
Related
I'm trying to optimize my javascript project with r.js optimizer from requirejs. I use both amd and non-amd modules in my project. There will be two environments, one with requirejs environment and the other with no requirejs environment.The files at the non-requirejs environment should not have on require or define calls. While combining amd-modules into bundles using r.js it is fine to have a define call with bundle name at the end of the file. But for the non-requirejs environment after the files have been optimized, they are also getting a define insertion at the end of the file with the module name.
Let's take I have four files A and B which are AMD-modules and C and D are non-AMD modules.
my build.js is like this
({
appDir: "../",
baseUrl: "./",
dir : "../../../output",
paths: {
A : '../somepath/to/A',
B : '../somepath/to/B'
},
modules : [
{
name : 'bundle1',
create : true,
include : ['A', 'B']
},
{
name : 'bundle2',
create : true,
include : ['C', 'D']
}
],
// removeCombined : true,
cjsTranslate: false,
optimizeCss : "none",
skipModuleInsertion: true,
optimize: "uglify",
fileExclusionRegExp: /^(((r|app.build)\.js)|(v0))$/,
keepBuildDir: false,
bundlesConfigOutFile: "bundles.js",
onModuleBundleComplete : function(data) {
console.log(data)
}
})
This is the bundles amd-file looks like.
define('A', function(){
//some stuff of A
});
define('B', function(){
//some stuff of B
});
define('bundle1',function(){});
The bundled non-amd file looks like
//some stuff of C
});
//some stuff of D
define('bundle2',function(){});
How to resolve this situation. I have gone through the optimization docs and example.build.js. still couldn't figure out the way. Am I missing something ? Is there a way to exclude that define call at the end of the non-amd-modules. If yes, How ?
I see you have used skipModuleInsertion option which based on the documentation should have helped you. I am not sure why it didn't.
Another option you can use is after the build is complete before writing to file, you can remove that particular define call using onBuildWrite
I am using steve sanderson's yeoman knockout scaffolding described here.
However I have one issue which is if I decide to create folders for different types of modules, and If I then want to inject one of these modules into my components using folder name conventions then I have to use a very verbose path resolution like "../../services/service".
define(["knockout", "text!./home.html","../../services/service"], function(ko, homeTemplate, service) {
function HomeViewModel(route) {
this.message = ko.observable('Welcome to App!');
}
HomeViewModel.prototype.doSomething = function() {
this.message('You invoked doSomething() on the viewmodel.');
};
return { viewModel: HomeViewModel, template: homeTemplate };
});
I am wondering if there is a better way to do this. For example just being able to use folder name and file name like "services/service"
The paths configuration is your answer (ref). In your configuration do:
require.config({
// ...
paths: {
'services': 'path/to/services/folder'
},
// ...
})
Now you can require the path/to/services/folder/myservice.js module from any other module as:
define(['services/myservice'], function(myservice) {
// ...
});
I'm not sure about the use of "exports" on shim config, following the example on the requireJS API, I can use Backbone (B in capital letter) to export it to a global scope.
This means that it will be a window object property.
But I realized that I'm forced to use that name, and I can't export it by other reference name, ie: "MyGlobalBackbone"
require.config({
paths: {
backboneAlias:'backbone'
},
shim : {
backboneAlias : {
deps : [ 'underscore', 'jquery-1.9.1' ],
exports : 'MyGlobalBackbone'
}
}
});
require(['backboneAlias'],function(backboneAsAliasDependency){
console.log(backboneAsAliasDependency);//Loaded Ok
console.log(MyGlobalBackbone); //Uncaught ReferenceError: MyGlobalBackbone is not defined
});
This code only works if I use "Backbone" instead of "MyGlobalBackbone"...
Actually you got it the other way around: shimming doesn't export a variable to global scope, it imports it FROM the global scope. The name ("Backbone") was set by Backbone's author, and this is the part you're explaining to RequireJS in shim config element.
See it in the API:
http://requirejs.org/docs/api.html#config-shim
Look at this sentence:
//Once loaded, use the global 'Backbone' as the
//module value.
Let's see it in that way, you will understand it:
//Once loaded, use a global variable 'Backbone' that defined by the backbone vendor as the
//module value.
You should use map to make an alias.
require.config({
paths: {
...
},
shim : {
...
},
map: {
'*': {
'MyGlobalBackbone': 'Backbone'
}
}
});
This will allow you to use MyGlobalBackbone instead of Backbone for all (*) modules.
I use the require.js - when i use the requiredjs, i am not get the underscore and backbone while i console without using shim's export modoule.
But jquery not asking this export shim dependent.. so, why we need to use the shim and it's export for the underscore and backbone?
here is my code:
requirejs.config({
baseUrl: 'js',
paths: {
"jquery":'lib/jquery-1.9.1.min',
"underscore":"lib/underscore-min",
"backbone" : "lib/backbone-min"
},
shim:{
"underscore":{
exports: '_'
//what is does here? without this i am getting undefined
},
"backbone":{
exports: 'Backbone'
//what is does here? without this i am getting undefined
}
}
});
require(["jquery","underscore","backbone"],function ($,_,Backbone) {
console.log($,_,Backbone);
//without shim export i am getting conosle like this:
// "function(), undefined, udefined" - why?
});
Backbone and underscore aren't AMD-compliant, they store themselves in global scope (i.e. in the window element in a browser environment). shim element allows exposing their global variables like if they were AMD modules, by "linking" the global variable (_ in case of underscore and Backbone in case of Backbone) with the "exports" part of the "virtual" module (I called it "virtual" because this happens on the fly, you don't have to change any code).
This:
"underscore":{
exports: '_'
}
means that adding dependency on "underscore" will grab a reference to window._ and expose it as an AMD module.
jQuery doesn't need it because it detects whether it's loaded as an AMD module and exposes itself in an AMD-compliant way in that case (scroll down to the very bottom of the original source code for more details)
I'm trying to define a global object that i can reference across all of my modules. however, in the modules, i am unable to reference my path, and it's saying that "g" does not exist.
In main1.js, i have this:
requirejs.config({
paths: {
Underscore: 'lib/underscore/1.3.3/underscore.min',
Backbone: 'lib/backbone/0.9.2/backbone.min',
Globals: 'lib/backbone/ globalVars'
}
});
require([ 'views/pages', 'views/filters'], function(allPages, filters) {
filters.render();
allPages.render();
});
inside globalVars.js, i have this:
(function() {
var Globals = {
isDemo: false
}
console.log('in globalvars') // this shows in my console
}).call(this);
and finally, inside of view/pages.js, i have this:
define([
'Globals',
'Underscore',
'Backbone'
], function(g, _, Backbone){
console.log(g.isDemo) //<-- returns "TypeError: g is undefined"
If i use a define inside my main1.js like this:
define( 'Globals', function() {
return {
isDemo: true
}
})
it works just fine. I haven't had much luck with trying to figure out why this is not working. I'd like to be able to just include a path to the globalVars rather than boilerplate pasting a define block in each and every module that needs it, since changing isDemo to false would require updating many other module pages (main2.js, main3.js, etc) as well. thanks!
Well, to start with, your globalVars.js is not in the module pattern, so requirejs doesn't know what you're trying to register as the module. If you change that file to use the pattern, like the define you added to main1.js, you should be all set. Is there a reason you aren't defining it as a module?