Using Backbone with Require

So we’ve done Backbone, we’ve done Require. Let’s put them together. Previously we wrote a pointless little Backbone app. Now, we’re going to Require-ify it.

Require.js is, as you know, all about modularisation. Fortunately, Backbone makes it pretty obvious what makes up a Module. Is it a distinct Backbone entity? A Model, a Collection or a View? Boom. It’s a module.

So with the difficult decision making done, let’s look at how we’d do this.

Starting from the beginning, our require config. You might recognise this from my original require post. That is because I am lazy.

File: js/requireConfig.js

require.config({
	paths: {
		//libraries
		jquery: 'libs/jquery',
		underscore: 'libs/underscore',
		backbone: 'libs/backbone',

		//scripts
		developerModel: 'models/DeveloperModel',
		developerCollection: 'collections/DeveloperCollection',
		developerListView: 'views/DevelopersListView'
	},
	shim: {
		jquery: {
			exports: "$"
		},
		underscore: {
			exports: "_"
		},
		backbone: {
			deps: ['underscore', 'jquery'],
			exports: "Backbone"
		}
	}
});

File: js/index.main.js

require(['requireConfig'], function(){
	require(['developerListView'], function(DeveloperListView){
		var myView = new DeveloperListView();
	});
});

File: index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>One Page Web App</title>

	</head>
	<body>
		<section id="content">
			<h1>Really Useful Dev List App</h1>
			<input type="text" id="name"></input>
			<input type="radio" name="role" id="isUx">UX</input>
			<input type="radio" name="role" id="isDev">Dev</input>
			<button id='add'>Add List item</button>
			<ul></ul>
		</section>

		<script src="js/libs/require.js" data-main="js/index.main">
	</body>
</html>

This is the same html as my Backbone post but with a require script tag instead of an ordinary one.

Right, that’s all the essentially unchanged stuff out the way. Now let’s look at the MOSTLY unchanged stuff. After that we will have run out of stuff.

filename: js/models/DeveloperModel.js

define([
	'underscore',
	'backbone'
], function(_, Backbone){
	var Developer = Backbone.Model.extend({
		defaults: {
			name: 'A Dev'
		}
	});

	return Developer;
});

This is the Model from our earlier Backbone app. It is now a file in its own right wrapped in a define block. It has its dependencies, Backbone and Underscore defined and then establishes a function that creates the concept of a Developer Model and returns it. Note, it is not returning “A developer” it is returning the Developer Model, which can be instantiated as needed.

filename: js/collections/DeveloperCollection

define([
	'underscore',
	'backbone',
	'developerModel'
], function(_, Backbone, Developer){
	var DeveloperCollection = Backbone.Collection.extend({
		model: Developer
	});

	return DeveloperCollection;
});

This is our collection. Again, it returns the idea of a collection of developers, not an actual collection of developers. It may well be possible to remove the dependency on the Developer model by passing it into any calls to the DeveloperModel. I’ll be exploring this and if it turns out to be a good idea and possible, I’ll talk about it.

Finally, our View. For the sake of avoiding this post becoming any more massive than it already is, I’ve snipped out all the logic inside the View, if you want to see it check out my Backbone post. Doing my bit to save your monitor’s ink reservoir.

define([
	'jquery',
	'underscore',
	'backbone',
	'developerCollection',
], function($, _, Backbone, DeveloperCollection){
	var DevelopersListView = Backbone.View.extend({
		...
	});

	return DevelopersListView;
});

On a sidenote, when I wrote this I gave the path names in RequireConfig camel-cased names, starting on lowercase letters but decided to follow the convention of having anything imported into a file start with a capital letter. This was annoying. Don’t do that. Although I am fond of the capital letters for imported objects though. I recommend that.

That’s it, we now have a pointless little Backbone and Require app.

Advertisements
Tagged , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: