The setup below is the only way I can get backbone to ply nice with requirejs - is there a cleaner way? without having to specify the entire path to backbone everytime?
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href='<c:url value="/resources/css/bootstrap.min.css"/>'
rel="stylesheet" type="text/css" />
<script data-main="resources/js/main.js" src="resources/js/lib/require.js"></script>
</head>
<body>
<ul class="nav">
<li >Home</li>
<li>Rentals
<li>Films</li>
</ul>
</body>
</html>
main.js
require.config({
baseUrl : '/sakila/resources/js',
paths : {
jquery : 'lib/jquery-1.8.3.min',
underscore : 'lib/underscore-min',
jqueryui : 'lib/jquery-ui-1.9.2.custom.min'
},
shim : {
'/sakila/resources/js/lib/backbone-min.js' : {
deps : [ 'underscore', 'jquery' ],
exports : 'Backbone'
}
}
});
require([ 'router' ], function(Router) {
Router.initialize();
});
router.js
define(['underscore','jquery','/sakila/resources/js/lib/backbone-min.js'],function(_,$,Backbone){
var AppRouter = Backbone.Router.extend({
routes : {
'home' : 'home',
'films' : 'films',
'rentals' : 'rentals',
'*actions' : 'home', // default action
'':'home'
},
home:function(){
console.log('Routed to home');
},
films:function(){
console.log('Routed to films');
},
rentals:function(){
console.log('Routed to rentals');
},
});
initialize = function() {
var app_router = new AppRouter();
Backbone.history.start();
console.log('history started');
};
return {initialize:initialize};
});
You can create an alias for Backbone in the paths of your requirejs configuration and use that alias in your shims. Also, you don't need to specify the full path for backbone as it respects the baseUrl option in your configuration.
require.config({
baseUrl : '/sakila/resources/js',
paths : {
jquery : 'lib/jquery-1.8.3.min',
underscore : 'lib/underscore-min',
jqueryui : 'lib/jquery-ui-1.9.2.custom.min',
backbone : 'lib/backbone-min'
},
shim : {
backbone : {
deps : [ 'underscore', 'jquery' ],
exports : 'Backbone'
}
}
});
And then use it cleanly elsewhere.
define(['underscore','jquery','backbone'],function(_,$,Backbone){
})
The following post describes how to use Require.js with Backbone.js. It covers 2 different ways of integrating Backbone.js with Require.js that includes shims and AMD compliant backbone.js.
Personally, I would rather use the AMD compliant version of Backbone.js and undescore.js. It makes the configuration a little cleaner and will load the modules in parallel. The folloing blog post describes this option.
Re-Learning Backbone.js – Require.js and AMD
Related
I'm trying to setup a require js project for learning purposes. I need to run a Backbone app.
Index.html, looks plain and simple:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>RequireJS - Test drive</title>
<!-- data-main attribute tells require.js to load scripts/main.js after
require.js loads. -->
<script data-main="js/main" src="js/vendor/require.js"></script>
</head>
<body>
<h1>RequireJS - Test drive</h1>
</body>
</html>
Currently I have this config in my main.js: (which is the entry point in index.html for requirejs)
require.config({
paths: {
underscore: 'vendor/underscore-1.9.1.min',
jquery: 'vendor/jquery-3.4.1.min',
backbone: 'vendor/backbone-1.4.0.min',
app: 'app/app',
userModel: 'app/models/user.model',
userListView: 'app/views/user-list.view',
userSingleView: 'app/views/user-single.view',
},
bundles: {
'models': ['userModel']
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
}
},
});
// Start the app
define(['app'], (App) => {
return App.initialize();
});
In app.js, which I try to initiate the app with, I have the following:
define(['backbone'], (Backbone) => {
const initialize = () => {
console.log('App initialized.', Backbone);
const data = {title: 'title'};
const view = 0; // new View here....
};
return {
initialize: initialize
}
});
Now, if I remove backbone as a dependency, I am able to see the console.log message in the browser. If I leave it there, then the console throws this error:
require.js:5 GET http://127.0.0.1:8080/js/js/vendor/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not
Found)
require.js:5 Uncaught Error: Script error for "js/vendor/jquery-3.4.1.min", needed by: backbone
https://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)
Inspecting the network tab, I can see that the jQuery dependency has errored out, and for some reason an additional /js has been added to the path, which results in a 404 error for jQuery, but only when I try to use Backbone on the app.js file.
Path looks like this, with the additional /js added to it:
http://127.0.0.1:8080/js/js/vendor/jquery-3.4.1.min.js
What is it that I am missing in the configuration/setup of the application?
I believe you should set baseUrl in your config
require.config({
baseUrl: '/js'
});
EDIT As far as I understood through further research AngularJS isn't capable of injecting that controller code the way I wanted it to do. Anyway, I'm still interested in why exactly doesn't it work and how should it be done.
I've been trying to create my own AngularJS + RequireJS project seed and I've run into issues with app modules loading (I see them in the network inspector) but never actually executing.
So I've stripped down the app to just the AngularJS library with basic dependencies handled through in RequireJS and I've noticed that the app loads all of the files and modules properly but the top level application module controller (and now the only module in the app itself) that I'm bootstrapping onto the document never executes. Using ng-inspector I've come to a conclusion that there's also no controller scope defined.
There are no errors whatsoever in the console and what I can confirm is that app bootstraps properly and loads all of the modules but the appController is never executed.
Here's the code of the appBootstrap.js:
//requirejs config
require.config({
baseUrl: '/',
paths: {
'lib' : 'scripts/lib/',
'angular' : 'vendor/angular/angular.min'
},
shim: {
'angular': {
exports: 'angular'
}
}
});
//the actual app bootstrapping
require(['lib/appVendorLibs'], function(){
require([
'lib/appModule'
], function(appModule) {
angular.bootstrap(document, [appModule.name]);
});
});
Here's the appVendorLibs.js:
define([
'angular'
], function() {});
And here's the barebones appModule.js that I've come up with in order to test the controller execution that fails:
define([
'angular',
'lib/appController'
], function(angular, appController) {
var app = angular.module('app', []);
app.controller('appController', appController);
return app;
});
Here's the appController.js:
define([], function() {
var appController = function($scope, $rootScope){
$rootScope.aTestVar = "OK";
$scope.testObject = {};
$scope.testObject.text = "OK";
console.log("OK");
};
return ['$scope', '$rootScope', appController];
});
That console.log() call is never occurs nor do those lines referencing the $rootScope and $scope do anything.
Also, I've got ng-bind in my index.html that should be displaying the testObject.text variable but that never happens.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/styles/styles.css"/>
<title>AngularJS Module Loading Seed</title>
<base href="/">
</head>
<body>
<!-- Main Content Container -->
<p ng-bind="testObject.text"></p>
<script src="/vendor/requirejs/require.js" data-main="/scripts/lib/appBootstrap.js"></script>
</body>
</html>
What could be the problem here?
Backbone.Router.extend is giving me the error: "extend" cannot be used on
undefined
Nodejs and express is also used in this project.
but i have not mentioned anythin related to backbone in app.js
Below is my index.html and main.js.
I have a feeling, the jquery,underscore and backbone files may not be loading properly,due to which this error is happening
Kind of beginner in backbone.Any help is greatly appreciated
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="javascripts/jquery.min.js"></script>
<script src="javascripts/json2.js"></script>
<script src="javascripts/underscore-min.js"></script>
<script src="javascripts/backbone-min.js"></script>
<script src="javascripts/main.js"></script>
</head>
<body>
<h1>< title </h1>
<p>Welcome to world of html</p>
</body>
</html>
main.js
$(document).ready(function(){
var Theater = {
Models: {},
Collections: {},
Views: {},
Templates:{},
Routers:{}
}
Theater.Models.Movie = Backbone.Model.extend({});
Theater.Collections.Movies = Backbone.Collection.extend({
model: Theater.Models.Movie,
url: "/json",
initialize: function(){
console.log("Movies initialize")
}
});
Theater.Routers = Backbone.Router.extend({
initialize:function(){ console.log("defaultRoute");},
routes: {
"": "defaultRoute"
},
defaultRoute: function () {
console.log("defaultRoute");
}
});
console.log("gonna call approuter");
var appRouter = new Theater.Routers();
Backbone.history.start();
});
A large number of tiny tweaks and micro bugfixes, best viewed by looking at the commit diff. HTML5 pushState support, enabled by opting-in with: Backbone.history.start({pushState: true}). Controller was renamed to Router, for clarity. Collection#refresh was renamed to Collection#reset to emphasize its ability to both reset the collection with new models, as well as empty out the collection when used with no parameters.
Backbone change log of 0.5.0
http://backbonejs.org/
Backbone's Router was called Controller and renamed to Router when it got version 0.5
Simply replace your Backbone and Underscore files into newer version or use Controller instead. then your code should work.
I strongly recommend to update your Backbone file due to bugs which Backbone used to have.
I'm trying really hard to wrap my head around Backbone.js with Require.js and Handlebars.js. I'm still not 100% sure what the best combination is but this is what i'm currently using to redo the marketing site at work.
We've added some more pages and as it grows I thought it would be good to put the static site into an MV like Backbone.js. It seems that this would only be a good option if you have dynamic data as templates only seem suited for this typical scenario of looping through data and rendering the DOM elements.
But what if that's even too advanced for your needs and you just want to use the SOC and DRY practices of keeping your code in modules for easier maintenance and not having to put huge blocks of markup in your .html files.
But it seems like every tut just goes over the same telling of the backbone/require.js story. I'm assuming it's because no one uses backbone/require for static sites? I hope I'm wrong, don't people still have a need for something like backbone/require.js even for larger static sites just to make them easier to maintain? It seems like a logical solution.
I'm having the hardest time understanding how to link from one static page to another just using the Router file in Backbone.
Ideally I would like to have a header and footer template that are universal throughout the site and then just have large blocks of code for the content areas of each page, why is this so hard to accomplish with backbone/require and handlebars?
Can anyone give me a simple solution to what doesn't seem like a complicated problem so I don't have to create 17 static pages all repeating the same header and footer.
I think starting with a simpler project like this will help me understand more complicated examples later.
I have included a sample index.html, a sample view, a sample router, config file and app.js file so you can see how i'm trying to pull this together but no matter how I look at this it seems that the only feasible way is to create a bunch of static pages and link them through the Router. If at the end of the day that's all I could accomplish then I'm ok with that.
Thanks.
index.html:
<body>
<div id="container">
<!-- BODY WRAPPER -->
<section class="body-wrapper">
{{Header Template Here}}
{{Body Content Here}}
{{Footer Template Here}}
</section>
<!-- /.body-wrapper -->
</div>
<!-- /#container -->
<script data-main="js/config" src="js/libs/require.js"></script>
</body>
config.js:
// Set the require.js configuration for you application.
requirejs.config({
// Initialize the application with the main application file
baseUrl: 'js',
paths:
{
jquery : [
'//ajax.goolgleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
'libs/jquery.min'
],
modernizr : [
'//cdjns.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min',
'libs/modernizr'
],
hbs : '../bower_components/require-handlebars-plugin/hbs',
underscore : '../node_modules/underscore/underscore-min',
backbone : '../node_modules/backbone/backbone-min',
handlebars : '../node_modules/handlebars/handlebars',
text : '../node_modules/text/text'
},
hbs: {
helpers: true,
i18n: false,
templateExtensions: 'hbs',
partialsUrl: ''
},
shim: {
'jquery' : {
exports: '$'
},
'underscore': {
exports: '_'
},
'handlebars': {
exports: 'Handlebars'
}
}
});
// Launch the App
require(['app'],
function(App){
App.initialize();
});
app.js
define(
['jquery','underscore','backbone','router'],
function($, _, Backbone, Router){
var initialize = function() {
Router.initialize();
}
return {
initialize: initialize
};
});
router.js
define(
['jquery',
'underscore',
'backbone',
'views/HomeView',
'views/HeaderView',
'views/FooterView',
'models/FeatureModel',
'collections/FeatureCollection'],
function($, _, Backbone, HomeView, HeaderView, FooterView, FeatureModel, FeatureCollection){
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'home', //#index
'/feature/:page' : 'featurePage',
'*actions' : 'defaultAction',
'about' : 'about', //#about
'/support' : 'support', //#support
}
});
var initialize = function(options) {
var appView = options.appView;
var router = new AppRouter(options);
router.on('home', function(){
var homeView = new HomeView();
homeView.render();
});
router.on('route:defaultAction', function(actions){
var homeView = new HomeView();
homeView.render();
});
router.on('support', function(){
var supportView = new SupportView();
supportView.render();
});
var headerView = new HeaderView();
var footerView = new FooterView();
Backbone.history.start();
};
return {
initialize: initialize
};
});
views/homeView.js
define(
['jquery','underscore','backbone' , 'text!/templates/home.html'],
function($, _, Backbone, homeTemplate){
var HomeView = Backbone.View.extend({
el : $('#content'),
render : function() {
this.$el.html(homeTemplate);
}
});
return HomeView;
});
templates/home.html
Big block of HTML content for the body of the index.html page
Few things:
Per http://backbonejs.org/#Router-routes the route callback should be in the form of route:(callback) so your home should be:
router.on('route:home', function(){});
You could also use
router.on('route', function(route, params){})
The router fires both events and you can handle as you wish. You can see the events documentation here: http://backbonejs.org/#Events-catalog
Also, not sure why you need handlebars or any templating language at all if they are all static html? You are already appending the html with your this.$el.html call.
If you just had simple html with:
<body>
<div id="header">
<div id="content">
<div id="footer">
</body>
Then you can stick your view el attribute like you have $('#header') etc and render accordingly.
Also not sure if you want to just have a single content view and swap out the html content in there instead on your render
routes: {
'feature/:page' : 'featurePage'
}
//route callback ex '/feature/feature1'
featurePage : function(page){
console.log(page) //'feature1'
//here you can create/render/set models/views accordingly
})}
Hopefully some of this helps.
Im trying to add AngularJS to my web application which already makes use of RequireJS. When loading my test page, i am seeing:
1) Error: No module: MyApp
...),factory:a("$provide","factory"),service:a("$provide","service"),value:a("$prov...
2) TypeError: Modernizr is undefined
if (!Modernizr.history) {
I am using AngularJS v1.1.5
Here's my tree:
resources
- CSS
- js
- controllers
- MainController.js
- libs
- angular.js
- jquery.js
- require.js
- mondernizr.js
......
......
......
main.js
mainApp.js
pages
test.html
main.js
(function(require) {
'use strict';
require.config({
baseUrl: '/resources/js',
paths: {
'zepto' : 'libs/zepto',
'jquery' : 'libs/jquery',
'angular' : 'libs/angular',
'router' : 'libs/page',
'history' : 'libs/history.iegte8',
'event' : 'libs/eventemitter2'
},
shim: {
'zepto' : { exports: '$' },
'angular' : { exports : 'angular' },
'router' : { exports: 'page'},
'modernizr' : { exports: 'Modernizr' }
}
});
require([ 'jquery', 'angular', 'routes', 'modernizr', 'event' ], function($, angular, routes, Modernizr, Event) {
function bootstrap() {
var app = new Event(),
router = routes(app);
if (typeof console !== 'undefined') console.info('>> module routes loaded ... executing router');
router({ click: false, popstate: false });
if (typeof console !== 'undefined') console.info('>> executed router');
}
$(function() {
if (!Modernizr.history) {
require([ 'history' ], bootstrap);
require([ 'controllers/MainController' ], bootstrap);
} else {
require([ 'controllers/MainController' ], bootstrap);
bootstrap();
}
});
});
})(this.require);
mainApp.js
define(['angular'], function(angular) {
return angular.module('MyApp', []);
})
MainController.js
require(['mainApp'], function(mainApp) {
mainApp.controller('MainController', function($scope) {
$scope.data = {message: "Hello"};
})
});
test.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="/assets/js/vendor/require.js" data-main="/assets/js/main"></script>
</head>
<body>
<div ng-controller="MainController">
{{ data.message + " world" }}
</div>
</body>
</html>
Any help appreciated.
The No module: MyApp problem is causes by the Angular automatic initialization: <html ng-app="MyApp">. Angular loads before mainApp.js, sees the ng-app and tries to find a module which is not (yet) there.
The solution is to manually bootstrap Angular from within main.js and inside the document load event, as described here.
I am not sure about the problem with Modernizr; I guess you are NOT loading it at all. RequireJs is not complaining because of the shim. How are you loading it? It is not included in your paths configuration. You may want to load Modernizr as independent script before all other scripts (as per recommendations), in which case no paths configuration is needed and the shim is enough.