I am using require.js, and in my config file I am calling the following to start the app (using this page as a reference: http://backbonetutorials.com/organizing-backbone-using-modules/):
require(['backbone', 'jquery', 'app'], function(Backbone, $, App) {
console.log('no dependancies loaded');
});
However when it complies (via grunt.js) it doesn't load backbone and jquery - it doesn't even list any dependancies. However if I remove the app require backbone and jquery are loaded, e.g.:
require(['backbone', 'jquery'], function(Backbone, $) {
console.log('dependancies loaded');
});
main.js
require.config({
paths: {
jquery: 'vendor/jquery',
underscore: 'vendor/underscore',
backbone: 'vendor/backbone'
},
shim: {
jquery: [],
backbone: {
deps: ['vendor/underscore', 'vendor/jquery'],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['backbone', 'jquery', 'App'], function(Backbone, $, App) {
App.initialize();
});
app.js
define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, Router){
var initialize = function() {
// Pass in our Router module and call it's initialize function
Router.initialize();
};
return {
initialize: initialize
};
});
No error messages are shown. Why does it not pick them up?
Xylar, change shim backbone - `deps: ['underscore', 'jquery']
Related
Using RequireJS and Backbone, is it possible to avoid the classic call
$(document).ready(function () {
});
I just want to know if I can avoid it, if I am using RequireJS and Backbone. How is it possible to avoid that call?
Yes, actually you don't need this using require.js
1st
<script data-main="main.js" src="path/require.js"></script>
On main file you could have something like this:
require.config({
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
},
paths: {
jquery : 'path/jquery',
underscore : 'path/underscore',
backbone : 'path/backbone'
}
});
require(
[
'backbone',
'router'
],
function (Backbone, Router) {
var router = new Router();
}
);
I am trying to implement angularjs with requirejs
Here is my applicaiton.js file which loads initially
var config = {
baseUrl: '/assets/',
paths: {
jquery: 'jquery',
twitter: 'twitter',
angular: 'angular',
angularjs: 'angularjs', # This is the directory
app: 'app'
},
shim: {
'twitter/bootstrap': {
deps: ['jquery']
},
'angular': {
exports: 'angular'
},
'app': {
deps: ['jquery']
}
}
}
requirejs.config(config);
requirejs(['jquery', 'twitter/bootstrap', 'angularjs/app', 'app/common']);
Directory structure
Application.js
Angularjs/
-controllers/
-directives/
-Services/
-app.js
As startup angularjs/app.js will be initiated and my app.js contains
define('app', ['angular'], function(angular) {
var app = angular.module('app', []);
return app;
})
require(['app'], function(app) {
app.controller('FirstController', function($scope) {
$scope.message = 'hello';
})
})
While running getting the exception as
Failed to instantiate module app
Used this as reference link
That's not a healthy way to use RequireJS aside from the fact that does not work. Please refer to my answer regarding using RequireJS with AngularJS: Does it make sense to use Require.js with Angular.js?
Could someone please explain/provide an example how to get this routing thingy to work in Marionette.
I would like to get console.log("stuff") after navigating to /#test.
This is what I have so far and it does absolutely nothing (no errors though...):
main.js:
requirejs.config({
baseUrl: '/',
paths: {
'text': '../vendor/javascripts/requirejs-text/text',
'backbone': '../vendor/javascripts/backbone/backbone',
'backbone.wreqr': '../vendor/javascripts/backbone.wreqr/backbone.wreqr',
'backbone.babysitter': '../vendor/javascripts/backbone.babysitter/backbone.babysitter',
'jquery': '../vendor/javascripts/jquery/jquery',
'jquery-ui': '../vendor/javascripts/jquery-ui/jquery-ui',
'json2': '../vendor/javascripts/json2/json2',
'marionette': '../vendor/javascripts/marionette/backbone.marionette',
'underscore': '../vendor/javascripts/underscore/underscore',
'handlebars': '../vendor/javascripts/handlebars/handlebars'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['jquery', 'underscore', 'json2'],
exports: 'Backbone'
},
'marionette': {
deps: ['backbone'],
exports: 'Marionette'
},
'jquery-ui': {
deps: ['jquery']
},
'handlebars': {
exports: 'Handlebars'
}
}
});
define(["app"], function(App) {
return App.start();
});
app.js:
define(['underscore', 'jquery', 'backbone', 'marionette', 'view', 'router'], function(_, $, Backbone, Marionette, View, Router) {
var App;
App = new Backbone.Marionette.Application();
App.on("initialize:after", function() {
var router, view;
view = new View();
return router = new Router();
});
return App;
});
router.js:
define(["marionette", "controller"], function(Marionette, Controller) {
var AppRouter;
AppRouter = Backbone.Marionette.AppRouter.extend({
controller: Controller,
appRoutes: {
'test': 'testStuff'
},
initialize: function() {
return console.log('router init');
}
});
return AppRouter;
});
controller.js:
define ["marionette"], (Marionette) ->
Controller = Marionette.Controller.extend
initialize: ->
console.log 'controller initialized'
testStuff: ->
alert 'stuff'
# create an instance
Controller = new Controller()
So this thing got solved:
Needed to add
if (Backbone.history) {
Backbone.history.start();
}
after initializing the router
I have a problem with an r.js build in my app loader.
Unbuild mode is working perfect but after a build with r.js the variables in app_loader.js#L7 bb and hb are undefined. So far I work around by using global variables Handlebars und Backbone but what is wrong with this shim?
I have removed your global references and tested this locally. It works.
build.js - updated to use app_main as config file
({
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false,
appDir: "../www-root-dev",
dir: "../www-root",
keepBuildDir: false,
optimize: "uglify2",
mainConfigFile: "../www-root-dev/assets/js/app_main.js",
modules: [{
name: "app_main"
}]
})
app.js
define(["app_loader"], function(loader){
var $ = loader.$, Backbone = loader.Backbone;
...
});
app_loader.js
define(["jquery","underscore","backbone","handlebars","app_routes"],
function($, _, Backbone, Handlebars, router){
return {
$: $.noConflict(),
_: _,
Backbone: Backbone,
router: router,
Handlebars: Handlebars
};
});
app_main.js - updated to simplify paths
require.config({
baseUrl: './assets/js',
paths: {
mvc: '../../mvc'
},
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
deps: ['jquery'],
exports: 'Handlebars'
}
}
});
require(['app'], function(App){
App.initialize();
});
app_routes.js
define(["jquery", "underscore", "backbone", "mvc/demo.view.js", "mvc/demo.model.js"], function($, _, Backbone, DemoView, DemoModel) { ... });
demo.model.js
define(["backbone"], function(Backbone) { ... });
demo.view.js
define(["jquery","backbone","text!mvc/demo.html"], function($, Backbone,demoTemplate) { ... });
I think the error is because in your shim you have exported backbone and handlebar as Backbone and Handlebars respectively,
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars:{
deps: ['jquery'],
exports: 'Handlebars'
},
and in your app_loader.js#L7 you are using it as bb and hb.
Either in shim export it as bb and hb:
backbone : {
deps: ['underscore', 'jquery'],
exports: 'bb'
},
handlebars:{
deps: ['jquery'],
exports: 'hb'
},
or use Backbone and Handlebars in app_loader.js#L7 instead of bb and hb:
define("app_loader",[
"jquery",
"underscore",
"backbone",
"handlebars",
"order!assets/js/app_routes.js"
], function(jQuery, underscore, Backbone, Handlebars, router){
I am also new to backbone and requirejs but it should help.
I have forked your github project and use grunt requirejs to run the optimization.
I manage to run the site and didn't notice any console errors in Chrome.
I took your project and noticed the errors in your build. I then made some changes to your app_main.js file as follows. Let me know if this solves your issues? Solved mine.
// Require.js allows us to configure shortcut alias
// Their usage will become more apparent futher along in the tutorial.
require.config({
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
exports: 'Handlebars'
}
},
paths: {
appLoader: 'app_loader',
jquery: 'jquery',
underscore: 'underscore',
backbone : 'backbone' ,
handlebars: 'handlebars'
}
});
require([
'app'
], function(App){
App.initialize();
});
Hi all Im trying to load backbone and backbone-relational in require js every time I just require 'backbone', this is my code:
main.js:
requirejs.config({
paths: {
'domReady': 'lib/require/domReady',
'text': 'lib/require/text',
'jquery': 'lib/jquery/jquery',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone/loader',
'relational': 'lib/backbone/relational',
'iosync': 'lib/backbone/iosync',
'iobind': 'lib/backbone/iobind'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'relational': {
deps: ['backbone']
},
'iobind': {
deps: ['backbone']
},
'iosync': {
deps: ['backbone']
}
}
});
require([
'domReady!',
'jquery',
'backbone',
'models/application',
'views/application'
], function () {
// start the app
var applicationModel = new BACON.models.Application();
var applicationView = new BACON.views.Application({
el: $('body'),
model: applicationModel
});
});
and lib/backbone/loader.js:
define([
'lib/backbone/backbone',
'relational',
'iobind',
'iosync'
]);
but running my app on chrome gives me:
Uncaught Error: Load timeout for modules: relational,iobind,iosync
So it seems i have a dependency loop... Is there a way to make this work or is there another way to accomplish this??
In your shim config you added a depedency for relational to backbone, which refer to libs/backbone/loader, and this generate a loop while loading lib/backbone/loader.js.
You should change your path config for backbone to 'lib/backbone/backbone' and add another named path for the loader if you want.