I want to include the locale-feature from MomentJS into one of my Backbone Views. http://momentjs.com/docs/#/i18n/adding-locale/ - but I get an error:
Uncaught TypeError: undefined is not a function - and it refers to:
return moment.defineLocale('da', {
In my config.js I have:
require.config({
deps: ['main'],
paths: {
jquery : '../lib/jquery-2.1.1.min',
underscore : '../lib/lodash-2.4.1',
backbone : '../lib/backbone',
moment : '../lib/moment.min',
locale : '../lib/locale/da'
},
And in my View I have:
define([
'app',
'backbone',
'moment',
'locale'
],
function (App, Backbone, moment, locale) {
...
Does anyone know what the issue could be?
Here is the oficial documentation http://momentjs.com/docs/#/use-it/require-js/
seems to me that there is a little trick to work with requirejs
Related
I have modernizr / pollyfiller included at the top of my index.html file, and in my main.js:
require.config({
paths : {
'jquery' : 'lib/jquery-1.10.2.min',
'jqdate' : 'lib/jquery.dateFormat-1.0',
'webshims' : 'lib/polyfiller'
},
shim : {
'lib/underscore' : {
exports : '_'
},
'lib/backbone' : {
deps : ["lib/underscore", "jquery"],
exports : 'Backbone'
},
"modernizr" : {
deps : ["jquery"],
exports : "modernizr"
},
"webshims" : {
deps : [ "jquery", "lib/modernizr-custom"],
exports: "webshims"
}
}
});
var router, vent;
require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "webshims"], function($, _, Backbone, Router, modernizr, webshims) {
$(function() {
$.webshims.setOptions('forms forms-ext', {
replaceUI : false,
waitReady : false
});
$.webshims.polyfill('forms forms-ext');
router = new Router();
vent = _.extend({}, Backbone.Events);
$.expr.cacheLength = 1;
Backbone.history.start({
});
});
});
This will generally load fine, however, sometimes it looks like webshims is not defined by the time I try to call:
$.webshims.setOptions('forms forms-ext', {
replaceUI : false,
waitReady : false
});
$.webshims.polyfill('forms forms-ext');
and I get the error: TypeError: $.webshims is undefined
Is there a better way to load this?
edit
So, I updated the script like you said, and had to capitalize Webshims in the paths and shim definition. It loads fine but now I get an error:
Uncaught SyntaxError: Unexpected token <
in Chrome and
SyntaxError: syntax error
<!DOCTYPE html>
in firefox
Updated Answer
Alexander Farkas pointed out in a comment that polyfiller defines itself as "polyfiller" like this:
define('polyfiller', ['jquery'], factory);
So:
No shim should be required to load polyfiller.js.
The module defined by polyfiller.js should always be referred to as "polyfiller". So there has to be a paths setting that maps the module name polyfiller to the actual path of the polyfiller.js file.
So the original config should be modified to remove the "webshims" shim, then the paths setting "webshims": "lib/polyfiller" should become "polyfiller": "lib/polyfiller" and the require call should be:
require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "polyfiller"], function($, _, Backbone, Router, modernizr) {
I've dropped the last variable from the function's parameters because there's no need to pass the module value since the polyfiller.js file registers itself as $.webshims.
This is similar to how jQuery defines itself as "jquery" (it needs no shim and is always called "jquery").
Original Answer
Change your require call so that you require "webshims" instead of "lib/polyfiller":
require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "webshims"], ...
The code in your question shows you've set the paths configuration option so that the module name "webshims" resolves to "lib/polyfiller", and created what looks like a sensible shim for it. However, when you require the webshims module you refer to it as "lib/polyfiller". RequireJS does not do a reverse resolution to figure out that "lib/polyfiller" is "webshims".
Alternatively, you could drop the "webshims" name from paths and rename the shim so that it is set for "lib/polyfiller". However, I consider it to be a better practice to refer to 3rd party libraries by one-word names throughout an application rather than have paths for them. So "jquery", "bootstrap", "underscore", and "webshims" etc. rather than "lib/...".
I am new to angularjs
I am trying to integrate angularjs with requirejs . How ever I am getting the error
Uncaught Error: No module: app
This is my setup
main.coffee
require.config
baseUrl : "/Scripts/"
paths :
jquery : 'libs/jquery/jquery-2.0.3'
angular : 'libs/angular/angular'
'angular-resource' : 'libs/angular/angular-resource'
bootstrap : 'libs/bootstrap/bootstrap'
shim :
angular :
exports :'angular'
'angular-resource':
deps :['angular']
jquery :
exports: ['jquery']
bootstrap :
deps :['jquery']
app:
deps :['app-boot']
require ['app-angular/modules/app','app-angular/modules/app-boot'], ($,angular)->
app-boot.coffee
require ['jquery','angular','bootstrap'], ($,angular)->
$(document).ready ->
angular.bootstrap document,['app']
app.coffee
define "app",['angular','angular-resource'], (angular)->
angular.module 'app',['ngResource']
StudentController.coffee
require ["app"] , (app) ->
app.controller "StudentController" , ($scope) ->
$scope.msg = "Hello Joy !! How are you !! You are in Angularjs"
And my Index.cshtml
<div class="page-content">
<div ng-controller="StudentController">
<p ng-bind="{{msg}}">
</p>
</div>
However it gives the error Uncaught Error: No module: app
I also removed the ng-app from html also have bootstrapped the angular manually on domready . So where am I going wrong ?
I think that you need to invert the dependency on this bit of code:
app:
deps :['app-boot']
It's the way around:
'app-boot': {
deps: ['app']
}
Your app-boot.coffee file depends on the module app that is defined on the app.coffee file
Looks like you're following this guide, which is double plus good.
I was able to get it to work but kept getting the same error message because in my Angular controller, 'app' was not defined. It appears the 'app.controller' doesn't get set there, as the guide states, and just loading it via the 'require' statement is sufficient.':
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']
This is only a little different than yours.
/* shim */
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"angular":{
exports:"angular"
},
"directives":{/* this is my custom Angular directive */
deps:["angular"]
}
}
});
/* RequireJS module */
define("app", ["angular", "directives"], function(angular)
{
var app = angular.module("app", ["zipppyModule"]);
angular.element(document).ready(function()
{ angular.bootstrap(document,['zippyModule']); });
});
/* 'app' loads the module */
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']
Backbone doesn't get called in the indexview module.
using requirejs 2.1.5/2.1.4 and backbonejs 0.9.10
main.js after running r.js
...
// this is causing the backbone to return
// null/undefined in the next define call below
define("backbone", function(){});
define('views/index/IndexView', [
'underscore',
'backbone',
'text!templates/index/indexTemplate.html'
], function(_, Backbone, indexTemplate){
console.log(Backbone); // returns undefined
var IndexView = Backbone.View.extend({
...
BUT if I take out the first define call that registers backbone as a module, everything
works fine. but backbone-min.js gets loaded separately. but for now it's the only way
to make the script run. I am definitely missing something here.
main.js
require.config({
paths: {
underscore : 'libs/underscore/underscore-min',
backbone : 'libs/backbone/backbone-min'
templates : '../templates'
},
shim: {
'backbone': {
deps: ['jquery','underscore'],
exports: 'Backbone'
}
}
});
require(['app'], function(App){
App.initialize();
});
build.js
({
appDir: "../",
baseUrl: "js",
dir: "../../build",
optimize: "none",
paths: {
"jquery": "libs/requirejs/require-jquery",
"underscore" : 'libs/underscore/underscore-min',
"backbone": 'libs/backbone/backbone-min',
"templates": '../templates',
},
modules: [
{
name: "main",
exclude: ["jquery"]
}
]
})
I'm still getting my feet wet with backbone and requirejs.
any feedback is much appreciated.
First of all, you don't need that define('backbone',...). What is that part for anyways? You don't need to define Backbone as a module. Requirejs is doing the job of making Backbone available for you to use throughout your framework. As you can see in your code, by calling Backbone.View.extend(), Backbone already exists. If you want to inspect it, don't use console.log, use console.dir instead. In the chrome inspector it formats the output nicely.
Secondly, add underscore to the backbone deps array in your shim.
I've just had this issue, you need to add the 'shim' from your main.js to your build.js file, and will work like a charm ;)
here is the error thrown to my console
Uncaught TypeError: Object has no method 'chain' hbs.js:282
getExternalDeps hbs.js:282
(anonymous function) hbs.js:306
xhr.onreadystatechange hbs.js:73
Uncaught Error: Load timeout for modules: hbs!templates/reset_unnormalized2,hbs!templates/pages/login_unnormalized3,hbs!templates/reset,hbs!templates/pages/login
http://requirejs.org/docs/errors.html#timeout require.js:160
i'm using the handlebars-require-plugin and i've even tried adding "hbs" to my require shim but the result is the same.
here is my marionette view code:
define([
"bootstrap", // bootstrap does not export anything, so no arg sent to our function
"marionette",
"session", "events",
"hbs!templates/pages/login"
], function( Marionette, Session, Events, LoginTemplate ){
return Marionette.View.extend({
template : {
type : "handlebars",
template : LoginTemplate
}
});
});
i have no idea what's going on here and every search i've pulled up has yielded no useful results.
what's happening? why is this happening? please help.
Could be that you have your args to your callback incorrectly defined? If a value does not define anything (such as bootstrap) then make it last. Right now your Marionette arg contains the undefined value of bootstrap, Session now holds Marionette etc.
define([
"marionette",
"session", "events",
"hbs!templates/pages/login",
"bootstrap", // bootstrap does not export anything, so no arg sent to our function
], function( Marionette, Session, Events, LoginTemplate ){
return Marionette.View.extend({
template : {
type : "handlebars",
template : LoginTemplate
}
});
});
i figured it out.
it turns out my problem was not related to the hbs plugin as it was with using it, handlebars, and json2 with requirejs.
the first problem, as described above, was solved by switching out the lodash library with underscore. i was under the impression that these two were interchangeable, but apparently that is NOT the case.
then i was getting errors that "stringify" is not a function on the object null which led me to find that JSON was not defined inside hbs.
i had to go back to my require.config({ shim:{} }) and define json2 with an export of JSON
now i am not getting errors from hbs but i have to figure out why my view is not displaying.
here is my config code, should anyone else be interested.
require.config({
// paths to required javascript files
paths : {
bootstrap : "../assets/js/bootstrap.min",
jquery : "../assets/js/jquery.min",
json2 : "../assets/js/json2",
underscore : "../assets/js/underscore.min",
backbone : "../assets/js/backbone.min",
marionette : "../assets/js/backbone.marionette.min",
hbs : "../assets/js/hbs",
handlebars : "../assets/js/handlebars",
i18nprecompile : "../assets/js/hbs/i18nprecompile"
},
// "shim" will allows us to load in deps synchronously so that we do not
// run into a situation where dependencies are not available
shim : {
json2 : { exports : "JSON" },
jquery : { exports : "jQuery" },
underscore : { exports : "_" },
backbone : {
deps : ["jquery", "underscore", "json2"],
exports : "Backbone"
},
marionette : {
deps : ["jquery", "underscore", "json2", "backbone"],
exports : "Marionette"
},
hbs : {
deps : ["jquery", "underscore", "json2", "i18nprecompile", "handlebars"],
exports : "hbs"
},
bootstrap : { deps : ["jquery"] }
}
});
I have configured requirejs to load the core libs (jquery, underscore, backbone).
Now I would like to add my backbone models, controllers, views, etc to be loaded asyncronly
I found a lots of tutorials to this topic and lots of "ready" boilerplates unfortunatly I mentioned that most approaches are depreceated or rather complicated (even there are better approaches).
One example is how I configured requirejs for the main libs:
https://stackoverflow.com/a/10914666/1309847
So how do I load Backbone Views, Models, Collections, Routers, Controllers and Templates with a simple and valid Requirejs configuration?
I followed youre advice but get some strange error
main.js
require.config({
paths: {
jquery: 'vendors/jquery/jquery',
underscore: 'vendors/underscore/underscore',
backbone: 'vendors/backbone/backbone'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require(['app'], function(app){
});
app.js
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
var Message = new Backbone.Model.extend({
//idAttribute: '_id',
//defaults: { body: '' }
//url: function(){ return this.id ? '/messages/' + this.id : '/messages'; }
});
var newMessage = new Message({ body: 'hi' });
newMessage.save();
});
The error occours in app.js:
Uncaught TypeError: Object [object Object] has no method 'apply'
When I comment the new Backbone.Model.extend part I don't get any error anymore.
in my experience, the best way to bootstrap your application is by creating a Backbone.Router. So you can associate urls with your application functionality.
If you are using RequireJS+Backbone, you probably have a main.js where RequireJS is configured (paths, shims, etc). The first call to "require" is used to load a initial script in order to bootstrap the whole app.
For example:
/**
* main.js - RequireJS bootstrap
*/
require.config({
paths: {
//your paths
},
shim: {
//your shims
}
});
require(
[
'app' //app.js is at the same directory as main.js
],
function(app) {
app.init();
}
);
then in app.js you can create a new Router instance, or you can just start creating Views and Models.
For further reference: http://addyosmani.github.com/backbone-fundamentals/
So as I have now understood right: You have to wrap a requirejs function around youre own custom js file.
The function is called define. The first parameter is an array of the dependencies which you have defined in the main.js file or a relative path to another custom js from you.
The second parameter is the callback which holds the original file. Important is that you return the object, function, array or variable which you want to share.
The whole thing looks like this:
define(
['underscore', 'backbone'], // the dependencies (either relative paths or shortcuts defined in main.js
function(_, Backbone){ // the return statement of the deps mapped to a var
var MessageModel = Backbone.Model.extend({ // the original code, file
defaults: { body: '' },
initialize: function(){}
});
return MessageModel; // the return statement, sharing the "final result", sometimes you return the initialize parameter
});
The same for a collection wrapping the models:
define(
['jquery', 'underscore', 'backbone', 'models/message_model'], // deps and the last one is the relative path
function($, _, Backbone,MessageModel){ // same as above explained
var MessageCollection = Backbone.Collection.extend({
model: MessageModel,
initialize: function(){}
});
return MessageCollection;
});
I now only have to figure out how I can bootstrap to whole application. But I think I need more knowledge of backbone to do this :)