Use patient model instead of creating a separate view-model

public/index.dev.html

@@ -119,23 +119,23 @@
   </script>
 
   <script type="text/template" id="template-patient">
-    <div class="name"> <%= Name %> </div>
-    <div class="age"> Age: <%= Age %> </div>
-    <div class="address"> <%= Address %> </div>
+    <div class="name"> <%= name() %> </div>
+    <div class="age"> Age: <%= age() %> </div>
+    <div class="address"> <%= address() %> </div>
 
     <section class="patient-details">
       <header>Patient History</header>
-      <section class="patient-information">
+      <section class="patient-information spacer">
         <p>Some info from the screener to help the doctor or nurse with more information as they scroll through the patient list</p>
       </section>
 
       <header>Family History</header>
-      <section class="patient-information">
+      <section class="patient-information spacer">
         <p>Some info from the screener to help the doctor or nurse with more information as they scroll through the patient list</p>
       </section>
 
       <header>Social History</header>
-      <section class="patient-information">
+      <section class="patient-information spacer">
         <p>Some info from the screener to help the doctor or nurse with more information as they scroll through the patient list</p>
       </section>
 

public/index.prod.html

@@ -91,9 +91,9 @@
   </script>
 
   <script type="text/template" id="template-patient">
-    <div class="name"> <%= Name %> </div>
-    <div class="age"> Age: <%= Age %> </div>
-    <div class="address"> <%= Address %> </div>
+    <div class="name"> <%= name() %> </div>
+    <div class="age"> Age: <%= age() %> </div>
+    <div class="address"> <%= address() %> </div>
 
     <section class="patient-details">
       <header>Patient History</header>

public/javascripts/app/models/patient.js

@@ -10,17 +10,22 @@ Application.Models.Patient = Backbone.Model.extend({
     return response;
   },
 
+  person: function() {
+    var person = this.get('person');
+    return person ? person : {};
+  },
+
   name: function() {
-    var preferredName = this.get('person').preferredName;
+    var preferredName = this.person().preferredName;
     return preferredName ? preferredName.display : undefined;
   },
 
   age: function() {
-    return this.get('person').age;
+    return this.person().age;
   },
 
   address: function() {
-    var preferredAddress = this.get('person').preferredAddress;
+    var preferredAddress = this.person().preferredAddress;
     return preferredAddress ? preferredAddress.display : undefined;
   }
 });

public/javascripts/app/views/encounter.show.js

@@ -16,8 +16,9 @@ jQuery(function() {
 
     initialize: function(options) {
       this.model.bind('change', this.render, this);
-      this.detailedView = new Application.Views.Patients.Show({
-        model: new Application.Models.Patient()
+      this.patient = new Application.Models.Patient({id: this.model.id});
+      this.patientView = new Application.Views.Patients.Show({
+        model: this.patient
       });
     },
 
@@ -29,7 +30,7 @@ jQuery(function() {
     },
 
     showDetails: function() {
-      this.detailedView.attachContentToCleanContainer();
+      this.patientView.attachContentToCleanContainer();
     }
   });
 });

public/javascripts/app/views/patient.show.js

@@ -16,17 +16,9 @@ jQuery(function() {
 
     render: function() {
       var that = this, viewModel, html;
-      this.model.fetch({
-        success: function(model, resp) {
-          viewModel = {
-            Name: model.name(),
-            Address: model.address(),
-            Age: model.age()
-          };
-          html = _.template(that.template)(viewModel);
-          jQuery(that.el).html(html);
-        }
-      });
+      this.model.fetch();
+      html = _.template(that.template)(this.model);
+      jQuery(that.el).html(html);
 
       return this;
     },

public/stylesheets/main.css

@@ -23,18 +23,18 @@ header[role="main"] {
 }
 
 .grey-gradient {
-  background-color: #98999B;
+  background-color: #98999b;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEF0F1), to(#98999B), color-stop(.5,#BBBDBE));
   background: -moz-linear-gradient(top, #EEF0F1 0%, #BBBDBE 50%, #98999B 100%);
   width: 100%;
-  color: #5D6267;
+  color: #5d6267;
 }
 
 .blue-gradient {
   background-color: #153451;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3D9CEB), to(#153451), color-stop(.5,#2C70AA));
   background: -moz-linear-gradient(top, #3D9CEB 0%, #2C70AA 50%, #153451 100%);
-  color: #FFF;
+  color: #fff;
 }
 
 .bar { 
@@ -52,7 +52,7 @@ header[role="main"] {
 }
 
 #appointments header {
-  color: #1D517D;
+  color: #1d517d;
   padding: 12px 0;
 }
 
@@ -67,7 +67,7 @@ header[role="main"] {
 }
 
 #appointments .search {
-  color: #517D1D;
+  color: #517d1d;
   font-weight: bold;
   font-size: bold;
   border: 1px solid black;
@@ -102,7 +102,7 @@ header[role="main"] {
   text-align: center;
   font-size: 0.8em;
   font-weight: bold;
-  color: #6D7277;
+  color: #6d7277;
 }
 
 #appointments #encounters-container .encounter-container .number {
@@ -119,11 +119,10 @@ header[role="main"] {
 #patient-container {
   border: solid 1px red;  
   float: left;
-  width: 70%;
 }
 
 #patient-container .patient {
-  padding: 30px;
+  padding: 1.5em;
   color: #5d6267;
 }
 

spec/javascripts/index.dev.html

@@ -36,6 +36,7 @@
 
   <!-- include spec files here... -->
   <script src="models/encounter.spec.js"></script>
+  <script src="models/patient.spec.js"></script>
   <script src="collections/encounters.collection.spec.js"></script>
   <script src="router.spec.js"></script>
 
@@ -116,9 +117,9 @@
   </script>
 
   <script type="text/template" id="template-patient">
-    <div class="name"> <%= Name %> </div>
-    <div class="age"> Age: <%= Age %> </div>
-    <div class="address"> <%= Address %> </div>
+    <div class="name"> <%= name() %> </div>
+    <div class="age"> Age: <%= age() %> </div>
+    <div class="address"> <%= address() %> </div>
 
     <section class="patient-details">
       <header>Patient History</header>

spec/javascripts/index.prod.html

@@ -24,6 +24,7 @@
 
   <!-- include spec files here... -->
   <script src="models/encounter.spec.js"></script>
+  <script src="models/patient.spec.js"></script>
   <script src="collections/encounters.collection.spec.js"></script>
   <script src="router.spec.js"></script>
 
@@ -104,9 +105,9 @@
   </script>
 
   <script type="text/template" id="template-patient">
-    <div class="name"> <%= Name %> </div>
-    <div class="age"> Age: <%= Age %> </div>
-    <div class="address"> <%= Address %> </div>
+    <div class="name"> <%= name() %> </div>
+    <div class="age"> Age: <%= age() %> </div>
+    <div class="address"> <%= address() %> </div>
 
     <section class="patient-details">
       <header>Patient History</header>

spec/javascripts/models/encounter.spec.js

@@ -1,4 +1,6 @@
 describe("Encounter", function() {
+  "use strict";
+
   describe("which is well-formed", function() {
     beforeEach(function() {
       this.encounter = new Application.Models.Encounter({

spec/javascripts/models/patient.spec.js

@@ -1,13 +1,14 @@
 describe("Patient", function() {
+  "use strict";
+
   describe("which is well-formed", function() {
     beforeEach(function() {
       this.patient = new Application.Models.Patient({
         "person": {
           "age"             : 36,
           "preferredName"   : { "display": "Mr. John D Patient" },
           "preferredAddress": { "display": "555 Johnson Rd." }
-          }
-        },
+        }
       });
     });
 
@@ -28,7 +29,7 @@ describe("Patient", function() {
     beforeEach(function() {
       this.patient = new Application.Models.Patient({
         "attributes": {
-          "person": { },
+          "person": { }
         }
       });
     });
@@ -45,4 +46,24 @@ describe("Patient", function() {
       expect(this.patient.address()).toBeUndefined();
     });
   });
+
+  describe("which is severely mal-formed", function() {
+    beforeEach(function() {
+      this.patient = new Application.Models.Patient({
+        "attributes": { }
+      });
+    });
+
+    it("has undefined name", function() {
+      expect(this.patient.name()).toBeUndefined();
+    });
+
+    it("has undefined name", function() {
+      expect(this.patient.age()).toBeUndefined();
+    });
+
+    it("has undefined Address", function() {
+      expect(this.patient.address()).toBeUndefined();
+    });
+  });
 });