Permalink
Browse files

Merging the Development Branch for the "Introducing the Dashboard" ch…

…apter
  • Loading branch information...
robsearles committed May 12, 2013
2 parents 6c522ef + 64c1578 commit d68d75d37f164c8108d40e47ba8dcf55a7aa6a8f
Showing with 123 additions and 8 deletions.
  1. +0 −3 README.md
  2. +6 −0 index.html
  3. +116 −0 js/app/dashboard.js
  4. +1 −5 js/app/list.js
View
@@ -1,8 +1,6 @@
Backbone Reactive
====================
This is a small project I used to experiment with building a [Backbone.js](http://backbonejs.org/) application that could handle reactive design.
There is an accompanying series of [blog posts](http://www.robsearles.com/category/tutorials/backbone-reactive/) that explain my thought process behind this and the avenues I went down when exploring this subject matter.
You can find them at:
@@ -14,4 +12,3 @@ License
All code is licensed under the [Gnu General Public License (v3)](http://www.gnu.org/licenses/gpl.html).
All accompanying blog posts are licensed under the [Creative Commons Share Alike License](http://creativecommons.org/licenses/by-sa/3.0/).
View
@@ -17,5 +17,11 @@ <h1>Backbone Reactive</h1>
<p>This content is replaced by the backbone application, but is useful as a last-resort fallback.</p>
</div>
<script src="/js/jquery-1.8.3.min.js"></script>
<script src="/js/underscore-min.js"></script>
<script src="/js/backbone-min.js"></script>
<script src="/js/app/dashboard.js"></script>
</body>
</html>
View
@@ -0,0 +1,116 @@
// # Dashboard View
'use strict';
var Backbone; // hello jslint
var $; // hello jslint
// ## Shared Date Functions
// Utility class for date functionality
var DateFunctions = {
// convert a timestamp into a JavaScript Date Object
getDate: function (timestamp) {
return new Date(parseInt(timestamp, 10));
},
// Format a Javascript Date Object into a more readable date string
getDateNice: function (date) {
return date.toLocaleDateString();
},
// Format a Javascript Date Object into a more readable time string
getTimeNice: function (date) {
return this.padTime(date.getHours()) + ':' + this.padTime(date.getMinutes());
},
// Format a Javascript Date Object into a more readable date and
// time string
getDateAndTimeNice: function (date) {
return this.getDateNice(date) + " " + this.getTimeNice(date);
},
// ### Pad Time
// A very simple function to ensure that if the hours or minutes
// contain a single digit, pad it out. Eg: 9 becomes 09
padTime: function (time) {
if (time < 10) {
return '0' + time;
}
return time;
}
};
// ## Define the List Item Model
var ListItem = Backbone.Model.extend({
url: function () {
return '/mock-data/message.' + this.id + '.json';
}
});
var UserView = Backbone.View.extend({
className: 'user-details',
render: function () {
var html = '<h2>User Details</h2><p>Welcome Rob Searles</p>';
this.$el.html(html);
return this.el;
}
});
var MessageView = Backbone.View.extend({
className: 'message',
initialize: function () {
// for the sake of this demo, we know the latest message is number 5
this.model = new ListItem({id: 5});
},
loadMessage: function (callback) {
var self = this;
self.model.fetch({success: function () {
self.render();
callback(self.el);
}});
},
render: function () {
var date = DateFunctions.getDate(this.model.get('date'));
var dateNice = DateFunctions.getDateAndTimeNice(date);
var html = '<h2>Latest Message</h2>' +
'<p><label>From</label> ' + this.model.get('from') + '</p>' +
'<p><label>Date</label> ' + dateNice + '</p>' +
'<p><label>Subject</label> ' + this.model.get('subject') + '</p>' +
'<p>' + this.model.get('body') + '</p>';
this.$el.html(html);
return this.el;
}
});
var DashboardView = Backbone.View.extend({
// ### Initialise the View
initialize: function () {
this.render();
},
// ### Render this View
render: function () {
var self = this;
var html = '<h1>Backbone Reactive Dashboard</h1> ' +
'<p>This is generated by JavaScript.</p>';
self.$el.html(html);
var userDetails = new UserView();
self.$el.append(userDetails.render());
var messageView = new MessageView();
messageView.loadMessage(function(el) {
self.$el.append(el);
});
},
});
var dashboardView = new DashboardView({
el: $('#content')
});
View
@@ -143,10 +143,6 @@ var ListRowView = Backbone.View.extend({
var ListView = Backbone.View.extend({
// ### Initialise the View
// The view is initialised by loading in some data via an Ajax call
// the data is then assigned to this view's Collection, which is
// defined as being of type ListCollection. Once the collection has
// been defined and created, the view is rendered
initialize: function () {
var self = this;
self.collection = new ListCollection({}, {
@@ -194,4 +190,4 @@ var ListView = Backbone.View.extend({
// This will effectively build the page
var listView = new ListView({
el: $("#content")
});
});

0 comments on commit d68d75d

Please sign in to comment.