I'm trying to include a custom js-library/script in my RequireJS-config but it doesnt seem to work. So I hope someone can help me out. I'm using RequireJS in combination with Backbone and Handlebars, so just to mention it...
In my Require config I have:
require.config({
paths: {
jquery: 'lib/jquery/jquery',
backbone: 'lib/backbone/backbone',
// Templating.
handlebars: 'lib/handlebars/handlebars',
// Plugins.
jqueryEffects: 'lib/jquery/jquery.effects',
... //some more libraries
},
shim: {
backbone: {
deps: ['jquery', 'lodash','jqueryEffects'],
exports: 'Backbone'
},
lodash: {
exports: '_'
},
handlebars: {
exports: 'Handlebars'
},
jqueryEffects : {
deps: ['jquery']
}
}
});
The jquery.effects.js is a simple script i created my own to handle special click events or run animations etc. When i start to run my backbone app, the console tells me that the script is loaded. So now on one of my Views, I have rendered a HTML file which contains an anchor with a class which serves as an identifier, which after clicking it should trigger something...BUT, nothing happens, so I tried to make an alert in the jquery.effects.js-file:
$(function() {
alert($(".videoname").lenght);
});
This gave me the response undefined. Does anyone maybe have an idea? The same goes when I add more libraries, console says they are loaded, but nothing happens... ?!?!?!??
try this (length not lenght) :
(function() {
alert($(".videoname").length);
})();
That's means that your script is working ;)
Related
I'm using requirejs to load jquery.selectBoxIt. It uses the jQueryUI Widget factory, which is why I only loaded the widget factory from the jQueryUI official site into my project.
When the project is loaded with config.js, selectBoxIt runs without problems. But when I build the project with r.js, I get the error $.widget is not defined.
Please help me please fix it.
PS. I already read some Google results on it, but nothing helps.
config.js
require.config({
paths: {
'jquery': 'assets/libs/jquery/2.2.0/jscript/jquery.min',
'jquery.migrate': 'assets/libs/jquery/plugins/migrate/1.2.1/jscript/migrate.min',
'jquery.ui': 'assets/libs/jquery.ui/1.12.0/jscript/jquery-ui',
'jquery.selectboxit': 'assets/libs/jquery/plugins/selectboxit/3.8.1/jscript/selectBoxIt',
},
shim: {
'jquery.migrate': {
deps: ['jquery'],
exports: 'jQuery',
},
'jquery.selectboxit': {
deps: ['jquery.migrate', 'jquery.ui'],
},
},
});
module.js
define([
'jquery.selectboxit',
], function (SelectBoxIt) {
...
});
Error appear in selectBoxIt code in line
$.widget("selectBox.selectBoxIt", {
I am having trouble understanding about requirejs.config() function.
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
What does the function do? Please do not direct me to the documentation because I have read it and still found it confusing. I need a simple explanation on what this function does.
Are these scripts loaded asynchronously?
It creates aliases for script paths ant tells how to interpret bootstrap (non-AMD script) when loaded. Nothing is loaded yet. You have to require:
// we load two dependencies here
// `knockout` and `bootstrap` are expanded to values in config
// .js added to values
// callback function called when all dependencies are loaded
require(['knockout', 'bootstap'], function(Knockout, $) {
// jQuery is passed to this function as a second parameter
// as defined in shim config exports
});
The path is like declarations/definitions. So for example,
jquery: '../bower_components/jquery/dist/jquery',
you can later load this lib as follows.
define([
'jquery'
], function (jquery) {
//initialize or do something with jquery
}
You don't have to specify the absolute path of the library.
In shim, you will define dependencies. So for example,
paths: {
template: '../templates',
text: '../bower_components/requirejs-text/text',
jquery: '../bower_components/jquery/dist/jquery',
backbone: '../bower_components/backbone/backbone',
underscore: '../bower_components/underscore/underscore',
Router: 'routes/router'
},
shim: {
'backbone': ['underscore', 'jquery'],
'App': ['backbone']
}
Here backbone is dependent on underscore and jquery. So those two libs will be loaded before backbone starts loading. Similarly App will be loaded after backbone is loaded.
You might find this repo useful if you are familiar with backbone and express.
https://github.com/sohel-rana/backbone-express-boilerplate
I try to load JS files using RequireJS , however crossroads http://millermedeiros.github.io/crossroads.js/ seems not be loaded properly. I have checked using Chrome Dev Toolbar and all JS files are actually loaded. However running window.crossroad returned me undefined?
Below is my requirejs config.. Kindly advice... Thanks!
index.html
<script data-main="scripts/config" src="scripts/require.js"></script>
config.js
require.config({
shim: {
"zepto.min": {
exports: "$"
},
"underscore.min": {
exports: "_"
},
"crossroads.min": {
exports: "crossroads"
} }
});
require(["zepto.min","underscore.min", "crossroads.min",], function() {
console.log("=> Loading app")
require(["main"]);
});
main.js
require(["hp-config", "hp-model", "hp-view", "hp-controller"], function () {
console.log("=> Init");
console.log(window.crossroads);
//$(document).ready( function(){ HP.C.init(); });
});
If you look at the code for crossroads, you'll see that it detects that it is in a AMD environment (which RequireJS is) and calls define by itself. So you should remove the shim you have for it. The basic rule is: a library that does not call define needs a shim but a library that calls define does not. The reason window.crossroads is undefined is that crossroads calls define instead of exporting itself in the global space (on window).
Given the require.config call you currently have, the updated call would be:
require.config({
shim: {
"zepto.min": {
exports: "$"
},
"underscore.min": {
exports: "_"
}
}
});
The above config is the minimum change required. However, I would also advise not using .min in the names you pass to require or define. So your config.js could be instead:
require.config({
paths: {
zepto: "zepto.min",
underscore: "underscore.min",
crossroads: "crossroads.min"
},
shim: {
zepto: {
exports: "$"
},
underscore: {
exports: "_"
}
}
});
require(["zepto","underscore", "crossroads",], function() {
console.log("=> Loading app")
require(["main"]);
});
This way, if you want to switch to the non-minified version (for debugging) you can just change the paths setting instead of having to go everywhere you require these modules and change the names.
I'm implementing the search functionality described here for my Jekyll site but it needs six separate JavaScript files to work, so I'd like to use RequireJS to load all of these files as dependencies. Things are not working and the Error Console messages produce different results.
Webkit says Uncaught ReferenceError: Mustache is not defined. The file that's sending out the message jquery.lunr.search.js, which is the last JS file listed as a dependency.
Firefox and Opera return their respective versions of console errors for two separate files: SecondLevelDomains.js and IPv6.js.
Seeking an IE browser.
RE: getting Mustache and RequireJS to work together, there are lots of answers to this on SO but none of them seem to work for me in this instance. The current implementation of the site I'm using can be seen here.
A more visual representation of the code:
RequireJS reference in the HTML:
<script data-main="/js/config.js" src="/js/require.js" ></script>
Site structure
index.html
js
|__require.js
|__config.js
|__search.js
|__vendor
|__date.format.js
|__jquery.js
|__jquery.lunr.search.js
|__lunr.min.js
|__mustache.js
|__URI.min.js
config.js looks like this:
requirejs.config({
baseUrl: "/js",
deps: ["search"],
paths: {
jquery: "vendor/jquery",
lunr: "vendor/lunr.min",
mustache: "vendor/mustache",
dateFormat: "vendor/date.format",
uri: "vendor/URI.min",
LunrSearch: "vendor/jquery.lunr.search"
},
shim: {
jquery: {
exports: 'jquery'
},
lunr: {
exports: 'lunr'
},
'mustache': {
exports: 'Mustache'
},
dateFormat: {
exports: 'dateFormat'
},
uri: {
deps: ['jquery'],
exports: 'uri'
},
LunrSearch: {
deps: ['jquery', 'mustache'],
exports: 'LunrSearch'
}
}
});
And search.js (which should fire everything up) looks like this:
define("search", ["jquery", "lunr", "mustache", "uri", "dateFormat", "LunrSearch"],
function($, lunr, mustache, dateFormat, uri, LunrSearch) {
$('#search-query').lunrSearch({
indexUrl: '/search.json', // URL of the `search.json` index data for your site
results: '#search-results', // jQuery selector for the search results container
entries: '.entries', // jQuery selector for the element to contain the results list, must be a child of the results element above.
template: '#search-results-template' // jQuery selector for the Mustache.js template
});
});
Any ideas? Thanks!
I'm working on my first javascript based web application and wanted to leverage a few different frameworks that I've been looking into but I'm having a lot of trouble getting all my different libraries loaded properly. I am trying to use Backbone and Underscore as well as the javascript included with Twitter Bootstrap (which I'm using for my CSS/HTML scaffolding). This is my butchered attempt at loading all of the scripts but I'm still getting firebug errors coming out of of require.js
As per the suggested answers I have edited my setup. In my index.html:
<script data-main="../scripts/main.js" src="../scripts/require.js"></script>
And in main.js:
require.config({
// Require is defined in /scripts, so just the remaining path (and no ext needed)
'paths': {
"bootstrap": "scripts/bootstrap",
"jquery": "scripts/jquery",
"underscore": "scripts/underscore",
"backbone": "scripts/backbone"
},
'shim':
{
backbone: {
'deps': ['jquery', 'underscore'],
'exports': 'Backbone'
},
underscore: {
'exports': '_'
}
}
});
require([
'jquery',
'bootstrap',
'underscore',
'backbone'
],
function(bootstrap, $, _, Backbone){
Person = Backbone.Model.extend({
initialize: function () {
alert("Welcome to this world");
}
});
var person = new Person;
});
But I am still getting script errors from require.js that points to this link
http://requirejs.org/docs/errors.html#scripterror
From a glance it looks like it's the setup of RequireJS, take a look at this: https://github.com/jcreamer898/RequireJS-Backbone-Starter
You don't need to define your scripts in the body, those should be loaded through Require, so something like:
Your main index.html:
<script src="path/to/require.js" data-main="scripts/app">
Then the data-main reference would point to something like /scripts/app.js with the following:
require.config({
// Require is defined in /scripts, so just the remaining path (and no ext needed)
'paths': {
"bootstrap": "libraries/bootstrap"
"jquery": "libraries/jquery",
"underscore": "libraries/underscore-min",
"backbone": "libraries/backbone-min"
},
'shim':
{
backbone: {
'deps': ['jquery', 'underscore'],
'exports': 'Backbone'
},
underscore: {
'exports': '_'
}
}
});
require([
'bootstrap',
'jquery',
'underscore',
'backbone'
],
function(bootstrap, $, _, Backbone){
// Start your application here...
});
With RequireJS the only library you should include in the <script /> tags is require.js. In addition you need to specify a "main" javascript file, which should be loaded by RequireJS:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
The main file should then load other libraries:
requirejs(['jquery','backbone'], function ($,Backbone) {
//...
});
I suggest you read through the RequireJS API documentation and follow the examples.
Nobody has made the point that maybe you are starting with so many components (each with its concepts to learn) to be your first time Javascript project. I would try to explore each of the libraries separately before in really simple projects, have some experience with them and when you have a clear picture of what they do (docs don't always give it) you can start combining them all.
Possibly not the answer you were looking for, but it's my experience who's talking here. Good luck!