passing parameters to the loading view

assets/js/apps/contacts/show/show_controller.js

@@ -1,7 +1,10 @@
 ContactManager.module("ContactsApp.Show", function(Show, ContactManager, Backbone, Marionette, $, _){
   Show.Controller = {
     showContact: function(id){
-      var loadingView = new ContactManager.Common.Views.Loading();
+      var loadingView = new ContactManager.Common.Views.Loading({
+        title: "Artificial Loading Delay",
+        message: "Data loading is delayed to demonstrate using a loading view."
+      });
       ContactManager.mainRegion.show(loadingView);
 
       var fetchingContact = ContactManager.request("contact:entity", id);

assets/js/common/views.js

@@ -2,6 +2,19 @@ ContactManager.module("Common.Views", function(Views, ContactManager, Backbone,
   Views.Loading = Marionette.ItemView.extend({
     template: "#loading-view",
 
+    initialize: function(options){
+      var options = options || {};
+      this.title = options.title || "Loading Data";
+      this.message = options.message || "Please wait, data is loading.";
+    },
+
+    serializeData: function(){
+      return {
+        title: this.title,
+        message: this.message
+      }
+    },
+
     onShow: function(){
       var opts = {
         lines: 13, // The number of lines to draw

index.html

@@ -58,8 +58,8 @@ <h1><%= firstName %> <%= lastName %></h1>
     </script>
 
     <script type="text/template" id="loading-view">
-      <h1>Artificial Loading Delay</h1>
-      <p>Data loading is delayed to demonstrate using a loading view.</p>
+      <h1><%= title %></h1>
+      <p><%= message %></p>
       <div id="spinner"></div>
     </script>