Permalink
Browse files

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

…apter
  • Loading branch information...
2 parents 6c522ef + 64c1578 commit d68d75d37f164c8108d40e47ba8dcf55a7aa6a8f @robsearles committed May 12, 2013
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 @@
<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.