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!
Related
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
20% of the time, the scripts fail loading while using RequireJS.
The additional files that I am using throu the application require, besides the JS libraries, the base.js file, which contains configurations and some setup for underscore & backbone. Without these settings, the other files won't work.
The script tag in the is the following:
<script data-main="http://*path*/js/common" src="http://*path*/js/lib/require.js"></script>
The common.js file is
requirejs.config({
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
base: {
deps: ["backbone"]
}
},
paths: {
jquery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min',
'http://*path*/media/admin/js/lib/jquery.min'
],
base: 'http://*path*/media/admin/js/base',
backbone: 'http://*path*/media/admin/js/lib/backbone',
underscore: 'http://*path*/media/admin/js/lib/underscore'
}
});
The base.js file, with the settings for backbone, underscore and jQuery, contains:
define(['jquery', 'backbone', 'underscore'], function(jQuery, Backbone, _) {
//CODE
return var;
});
And the other files contain
define(['base'], function(var) {
//CODE
});
In the page I am loading the files using:
require(['common'], function() {
require(['page/file'], function() {
//CODE
});
});
What am I doing wrong, why jQuery, underscore and backbone fail loading sometimes and how can I fix this?
The error message is:
GET http://*host*/backbone.js 404 (Not Found) require.js:1
Uncaught Error: Script error for: backbone
http://requirejs.org/docs/errors.html#scripterror
I don't know that this is the only problem but this shim should be removed:
base: {
deps: ["backbone"]
}
You've shown a base.js file that calls define. The rule is simple: if your module calls define, then you use define to set dependencies, and the return value of the function you pass to define to set the value of your module; if your module does not call define, then you need a shim to set dependencies and determine the value of the module (if needed).
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 ;)
Here's my situation, using Backbone and Handlebars with Requirejs.
I'm following CommonJS module definition style, because I find myself to be more comfortable with it:
define(function(require) {
var Backbone = require('Backbone')
var Item = require('model/item')
// ...
})
And this is my requirejs config:
require.config({
baseUrl: "/javascripts/",
paths: {
jquery: 'components/jquery/jquery',
underscore: 'components/underscore/underscore',
backbone: 'components/backbone/backbone',
handlebars: 'components/handlebars/handlebars',
text: 'components/text/text'
},
shim: {
underscore: {
exports: "_"
},
handlebars : {
exports: "Handlebars"
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
Everything is running smooth before optimization, no problem occurs.
But, after optimization with r.js dependencies seem to break.
I'd like to use Almond js in production, so here's my build file:
({
baseUrl: ".",
paths: {
jquery: "components/jquery/jquery",
underscore: "components/underscore/underscore",
handlebars: "components/handlebars/handlebars",
backbone: "components/backbone/backbone",
text: "components/text/text"
},
// we use almond minimal amd module loader
name: "components/almond/almond",
// the application entry point
include: ['app/init'],
// we need to teel almond to require app/init
insertRequire: ['app/init'],
out: "main.js",
cjsTranslate: true,
wrap: true,
optimize: "none"
})
Now, when I run the optimized javascript in browser, all I get are error messages, saying me that jQuery and Handlebars are undefined (neither Backbone.$ is, of course).
A simple workaround was to force jQuery loading, and assigning it to Backbone, like this:
var $ = require('jQuery')
var Backbone = require('Backbone')
Backbone.$ = $
But it sounds very silly and redundant to me.
I feel like I'm doing something wrong but cannot figure out what.
After optimization Handlebars fail to load as dependency too.
If I force its loading (as I did with jQuery), I get an error message during the build process, saying me that the module fs (a npm package) cannot be found.
I googled but found only this topic on Google groups (https://groups.google.com/forum/?fromgroups=#!topic/requirejs/lYwXS-3qjXg) that seems to be related to my problem, even if proposed solutions are not working at all.
I think you should add the Shim's config in your build file too.
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!