Menu
We're currently kicking off our first Backbone.js project here at work. In fact it's our first major JavaScript project apart from the odd jQuery stuff.
Anyway, we struggle with the architecture for our stuff. What is the best way to sort stuff out?
We've started with having everything in separate files broken up in folders for; views, models, collections and routers and then we include everything in our index.html. The issue, though, is that this leaves us with having to check for the document ready event in every file. Is this the best way to do it?
Here's an example:
This is the file called PageModel, the first line seems wrong...
$(function(){
app.models.Page = Backbone.Model.extend({
//stuff
});
});
Then in our index.html we have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var app = app || {};
app.models = app.models || {};
app.collections = app.collections || {};
app.views = app.views || {};
app.routers = app.collections || {};
app.templates = app.templates || {};
app.models.griditems = app.models.griditems || {};
app.views.griditems = app.views.griditems || {};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/libs/json2.js" type="text/javascript"></script>
<script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"></script>
<script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"></script>
<script src="assets/js/models/GridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/collections/GridCollection.js" type="text/javascript"></script>
<script src="assets/js/templates/Submenu.js" type="text/javascript"></script>
<script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"></script>
<script src="assets/js/views/GridView.js" type="text/javascript"></script>
<script src="assets/js/views/GridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/VideoGridItemView.js" type="text/javascript"></script>
<script src="assets/js/routers/Router.js" type="text/javascript"></script>
<script src="assets/js/Application.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
220
Backbone. Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.
Backbone. js is neither difficult to learn nor difficult to use, and the time you will spend learning to use this serviceable framework will be well worth it, for you will learn how to use one of the most popular front-end frameworks and learn how to build modern web applications on the front end.
js. Backbone. js developers usually focus on the front-end aspect of web applications, but also must have basic understanding of some back-end technologies, since their responsibility includes the integration of APIs and resources with front-end elements as provided by the back-end developers and engineers.
This is structure we use in our Backbone projects
<!-- Libs Section -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery-1.5.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.maskedinput-1.3.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.mousewheel.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.scrollpane.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/fileuploader.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/modernizr.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/json2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/underscore-min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/backbone-min.js")"></script>
<!-- Libs Section -->
<!-- Core Section -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/config.js")"></script> <!-- Global configs -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/core.js")"></script> <!-- Core methods for easier working with views, models and collections + additional useful utils -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/app.js")"></script> <!-- Application object inherites core.js as prototype -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/renisans.js")"></script> <!-- Project Object. Creates Namespace and Extends it with project specific methods -->
<!-- Core Section -->
<!-- Routers Section -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/routers/workspace.js")"></script>
<!-- Routers Section -->
<!-- Models Section -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/models/profile.js")"></script>
...
<!-- Models Section -->
<!-- Collections Section -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/collections/messages.js")"></script>
...
<!-- Collections Section -->
<!-- Views Section -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/views/workspace.js")"></script>
...
<!-- Views Section -->
<!-- Localization Section -->
<script type="text/javascript" src="@Url.Content("~/Content/static/js/localizations/ru_RU.js")"></script>
<!-- Localization Section -->
<!-- Init Section -->
<script type="text/javascript">
$(function() {
Rens.container = $('.l-wrapper'); // Some parameters
Rens.init({
Localization: LocalizationStrings || {}, // Object with localization strings
Profile: {
// Bootstraping initial data to Profile model
}
});
});
</script>
<!-- Init Section -->
content of app.js
var App = function() {
this.Views = {};
this.Routers = {};
this.Models = {};
this.Collections = {};
this.User = {};
this.router = null;
this.view = null;
this.baseLocation = null;
this.beforeInit = function() {};
this.afterInit = function() {};
this.init = function(initData) {
if (typeof(this.beforeInit) === 'function') {
this.beforeInit.apply(this, arguments);
}
if (this.Views.Workspace) {
this.view = new this.Views.Workspace();
}
this.baseLocation = window.location.href.replace(/[?#].*/, '') == Config.web.host;
if (this.Routers.Workspace) {
this.router = new this.Routers.Workspace(initData);
}
this.view && this.view.setListeners && this.view.setListeners();
Backbone.history.start();
if (typeof(this.afterInit) === 'function') {
this.afterInit.apply(this, arguments);
}
}.bind(this);
};
App.prototype = Core;
and content of renisans.js
var Rens = new App();
$.extend(Rens, {
container: null,
Error: function(data) {
// Handling error
},
Localization: function(dictionary) {
return {
get: function(name) {
var argumentsList = Array.prototype.slice.call(arguments),
strings = argumentsList.slice(1),
text = this[name];
if (text && strings.length) {
$(strings).each(function(i, string) {
var reg = new RegExp('\\$' + i, 'go');
text = text.replace(reg, string);
});
}
return text || 'SLB.Localization.' + name + ' not found!';
}.bind(dictionary)
}
},
formatDate: function(rawDate) {
var timestamp = /\d+/.exec(rawDate)[0],
date = Rens.DateUTC(timestamp),
months = Rens.Localization.get('months');
return {
date: date,
fullDate: [date.dd, months[date.mm], date.hh].join(' '),
shortDate: [date.dd, date.MM, date.hh].join('.')
};
},
beforeInit: function(initData) {
this.Localization = new this.Localization(initData.Localization);
}
});
also simplified content of models/profile.js
Rens.Models.Profile = Backbone.Model.extend({
...
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
