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
Related
Really don't understand how to load third party libraries using Require.js in Angular.js project
For example 'topojson' is defined, but 'datamap' is undefined in this case.
Datamap from here https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js
Topojson from here https://github.com/mbostock/topojson/blob/master/topojson.js
Angular app.js:
'use strict';
requirejs.config({
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-route': ['../lib/angular-route/angular-route'],
'angular-resource': ['../lib/angular-resource/angular-resource'],
'angular-animate': ['../lib/angular-animate/angular-animate'],
'datamap':['../app/dense/world-view/datamaps.world'],
'topojson':['../app/dense/world-view/topojson'],
'lodash': ['../lib/lodash/lodash'],
'd3': ['../lib/d3js/d3']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
deps: ['angular'],
exports: 'angular'
},
'angular-resource': {
deps: ['angular'],
exports: 'angular'
},
'angular-animate': {
deps: ['angular'],
exports: 'angular'
},
'd3': {
exports: 'd3'
},
'topojson': {
deps: ['d3'],
exports: 'topojson'
},
'datamaps': {
deps: ['d3', 'topojson'],
exports: 'datamaps'
},
'lodash': {
exports: 'lodash'
}
}
});
require(
[
'angular',
'topojson',
'datamap',
'angular-route',
'angular-resource',
'angular-animate',
'lodash',
'd3'
],
function (angular, topojson, datamap) {
console.log("topojson", topojson);
console.log("datamap", datamap); // is undefined
angular.module('myApp', [
'myApp.graph',
'myApp.node',
'myApp.dense',
'ngAnimate',
'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.otherwise({
redirectTo: '/login'
});
})
;
angular.bootstrap(document.getElementById("myAppId"), ['myApp']);
});
Some of the Angular controllers:
'use strict';
define(['angular'], function (angular) {
angular
.module('myApp.dense', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/dense', {
templateUrl: 'assets/app/dense/dense.html',
controller: 'DenseCtrl'
});
}])
.controller('DenseCtrl', function ($scope) {
var map = new Datamap({
scope: 'world',
element: document.getElementById("someId"),
projection: 'mercator',
height: 500,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
}
});
})
;
});
In my angular controller new Datamap(...) says 'ReferenceError: Datamap is not defined'
This is not the only case.
Same for most external JS libraries.
I am running Angular project on top of Scala and SBT with WebJars, so Require.js is the only way how to load all that stuff.
I don't see any imports except for angular in your RequireJS module (the second snippet in your question). You need to add your other dependencies, such as datamap, etc.
Looks like in 'Datamap' object does not initialize, line 12535:
https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js#L12535
// expose library
if (typeof exports === 'object') {
d3 = require('d3');
topojson = require('topojson');
module.exports = Datamap;
}
else if ( typeof define === "function" && define.amd ) {
define( "datamaps", ["require", "d3", "topojson"], function(require) {
d3 = require('d3');
topojson = require('topojson');
return Datamap;
});
// window.Datamap = window.Datamaps = Datamap; // hack
}
else {
window.Datamap = window.Datamaps = Datamap;
}
Now it works for me.
Added that line after define:
window.Datamap = window.Datamaps = Datamap; // hack
and used require block inside Angular controller:
requirejs(["datamaps"], function () {
// draw map here new Datamap({...})
};
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?
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']
I'm using backbone.js along with jquery and underscore.js.
the error says:
TypeError: CollectorCollection is not a constructor
var collectors = new CollectorCollection();
This is my index.html
<html><heade></head><body><script data-main="js/mainCollector" src="js/libs/require.js"></script></body>
mainCollector.js
require.config({
paths: {
html5shiv: "libs/html5shiv",
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
tablesorter: "libs/jquery.tablesorter.min",
script: "script",
underscore: "libs/underscore.min", /*"http://underscorejs.org/underscore",*/
backbone: "libs/backbone.min", /*"http://backbonejs.org/backbone-min",*/
utils: "utils",
collectorModel: "models/collectorModel",
collectorCollection: "collectorCollection",
collectorRouter: "collectorRouter",
edit: "views/Collector/collector_edit",
index: "views/Collector/collector_index",
neww: "views/Collector/collector_new",
row: "views/Collector/collector_row",
show: "views/Collector/collector_show"
},
shim: {
jqueryui: {
deps: ["jquery"],
exports: "Jqueryui"
},
tablesorter: {
deps: ["jquery"],
exports: "TableSorter"
},
script: {
deps: ["jquery"],
exports: "Script"
},
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
require(["backbone", "underscore", "collectorCollection", "collectorRouter"],
function (Backbone, _, CollectorCollection, CollectorRouter) {
var Collectors = new CollectorCollection();
var router = new CollectorRouter({collectors: collectors});
console.log("Start App");
Backbone.history.start();
});
colectorCollection.js
define("collection", [
"underscore",
"backbone",
"collectorModel"
], function(_, Backbone, CollectorModel) {
console.log("Collection loaded");
var CollectorCollection = Backbone.Collection.extend({
// Reference to this collection's model.
url: "api/index.php/Collectors",
model: CollectorModel
});
return CollectorCollection;
});
collectorModel.js
define("model", ["underscore", "backbone"], function(_, Backbone){
console.log("model loaded");
var CollectorModel = Backbone.Model.extend({
urlRoot: 'api/index.php/collectors',
// the root
paramRoot: "collector",
// the default fields
defaults: {
id: null,
name: ""
}
});
return CollectorModel;
});
thanks.
Javascript is case sensitive
the variable names used in the definition files are local to the definition, they won't be available when required (if you do things correctly and don't write on the global namespace),
you define names for your modules, which probably will lead to problems down the road
This means that CollectorCollection won't be available globally, and that in
require(["collectorCollection"], function (collectorCollection) {
}
your collection is actually available as collectorCollection : note the lowercase c.
So, your require call could be written as
require(["backbone", "underscore", "collectorCollection", "collectorRouter"],
function (Backbone, _, CollectorCollection, CollectorRouter) {
var collectors = new CollectorCollection();
var router = new CollectorRouter({collectors: collectors});
console.log("Start App");
Backbone.history.start();
});
You've got a similar problem in your collection definition :
define([
"underscore",
"backbone",
"collectorModel"
], function(_, Backbone, CollectorModel) {
console.log("Collection loaded");
var CollectorCollection = Backbone.Collection.extend({
// Reference to this collection's model.
url: "api/index.php/Collectors",
model: CollectorModel
});
return CollectorCollection;
});
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.