Changed the JavaScript to use promises rather than triggered events. Cleaner, more modern approach to handling my MVC system.

Author: writeson

flask-connexion-rest-part-3/models.py

@@ -32,6 +32,9 @@ class Note(db.Model):
 
 
 class PersonSchema(ma.ModelSchema):
+    def __init__(self, **kwargs):
+        super().__init__(strict=True, **kwargs)
+
     class Meta:
         model = Person
         sqla_session = db.session
@@ -44,13 +47,19 @@ class PersonNoteSchema(ma.ModelSchema):
     This class exists to get around a recursion issue
     """
 
+    def __init__(self, **kwargs):
+        super().__init__(strict=True, **kwargs)
+
     note_id = fields.Int()
     person_id = fields.Int()
     content = fields.Str()
     timestamp = fields.Str()
 
 
 class NoteSchema(ma.ModelSchema):
+    def __init__(self, **kwargs):
+        super().__init__(strict=True, **kwargs)
+
     class Meta:
         model = Note
         sqla_session = db.session
@@ -63,6 +72,9 @@ class NotePersonSchema(ma.ModelSchema):
     This class exists to get around a recursion issue
     """
 
+    def __init__(self, **kwargs):
+        super().__init__(strict=True, **kwargs)
+
     person_id = fields.Int()
     lname = fields.Str()
     fname = fields.Str()

flask-connexion-rest-part-3/requirements.txt

@@ -12,13 +12,13 @@ itsdangerous==1.1.0
 Jinja2==2.10
 jsonschema==2.6.0
 MarkupSafe==1.1.0
-marshmallow==2.17.0
+marshmallow==2.18.0
 marshmallow-sqlalchemy==0.15.0
 openapi-spec-validator==0.2.4
-PyYAML==3.13
+PyYAML==4.2b4
 requests==2.21.0
 six==1.12.0
-SQLAlchemy==1.2.16
-swagger-ui-bundle==0.0.2
+SQLAlchemy==1.2.17
+swagger-ui-bundle==0.0.3
 urllib3==1.24.1
 Werkzeug==0.14.1

flask-connexion-rest-part-3/static/css/home.css

@@ -62,4 +62,4 @@ tbody tr:not(:last-child){
 
 tbody tr:hover {
     background-color: powderblue;
-}
+}

flask-connexion-rest-part-3/static/css/notes.css

@@ -108,14 +108,3 @@ tbody tr:hover {
 .timestamp {
     width: 30%;
 }
-
-.error {
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 5px;
-    border: 1px solid lightgrey;
-    border-radius: 3px;
-    background-color: #fbb;
-    visibility: hidden;
-}

flask-connexion-rest-part-3/static/css/parent.css

@@ -41,3 +41,14 @@ body, .ui-btn {
 .container {
     padding: 10px;
 }
+
+.error {
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 5px;
+    border: 1px solid lightgrey;
+    border-radius: 3px;
+    background-color: #fbb;
+    visibility: hidden;
+}

flask-connexion-rest-part-3/static/js/home.js

@@ -6,41 +6,33 @@
 let ns = {};
 
 // Create the model instance
-ns.model = (function() {
+ns.model = (function () {
     'use strict';
 
-    let $event_pump = $('body');
-
     // Return the API
     return {
-        'read': function() {
+        'read': function () {
             let ajax_options = {
                 type: 'GET',
                 url: '/api/notes',
                 accepts: 'application/json',
                 dataType: 'json'
             };
-            $.ajax(ajax_options)
-                .done(function(data) {
-                    $event_pump.trigger('model_read_success', [data]);
-                })
-                .fail(function(xhr, textStatus, errorThrown) {
-                    $event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
-                });
+            return $.ajax(ajax_options);
         }
     };
 }());
 
 
 // Create the view instance
-ns.view = (function() {
+ns.view = (function () {
     'use strict';
 
     var $table = $(".blog table");
 
     // Return the API
     return {
-        build_table: function(data) {
+        build_table: function (data) {
             let source = $('#blog-table-template').html(),
                 template = Handlebars.compile(source),
                 html;
@@ -51,58 +43,60 @@ ns.view = (function() {
             // Append the rows to the table tbody
             $table.append(html);
         },
-        error: function(error_msg) {
+        error: function (error_msg) {
             $('.error')
                 .text(error_msg)
                 .css('visibility', 'visible');
-            setTimeout(function() {
-                $('.error').css('visibility', 'hidden');
-            }, 3000)
+            setTimeout(function () {
+                $('.error').fadeOut();
+            }, 2000)
         }
     };
 }());
 
 
 // Create the controller instance
-ns.controller = (function(m, v) {
+ns.controller = (function (m, v) {
     'use strict';
 
     let model = m,
-        view = v,
-        $event_pump = $('body');
+        view = v;
 
     // Get the note data from the model after the controller is done initializing
-    setTimeout(function() {
-        model.read();
+    setTimeout(function () {
+
+        // Attach event handlers to the promise returned by model.read()
+        model.read()
+            .done(function (data) {
+                view.build_table(data);
+            })
+            .fail(function (xhr, textStatus, errorThrown) {
+                error_handler(xhr, textStatus, errorThrown);
+            });
     }, 100);
 
-    // handle application events
-    $('table').on('dblclick', 'tbody td.name', function(e) {
-       let $target = $(e.target).parent(),
-           person_id = $target.data('person_id');
-
-       window.location = `/people/${person_id}`;
+    // generic error handler
+    function error_handler(xhr, textStatus, errorThrown) {
+        let error_msg = `${textStatus}: ${errorThrown} - ${xhr.responseJSON.detail}`;
 
-    });
+        view.error(error_msg);
+        console.log(error_msg);
+    }
 
-    $('table').on('dblclick', 'tbody td.content', function(e) {
-       let $target = $(e.target).parent(),
-           person_id = $target.data('person_id'),
-           note_id = $target.data('note_id');
+    // handle application events
+    $('table').on('dblclick', 'tbody td.name', function (e) {
+        let $target = $(e.target).parent(),
+            person_id = $target.data('person_id');
 
-       window.location = `people/${person_id}/notes/${note_id}`;
-    });
+        window.location = `/people/${person_id}`;
 
-    // Handle the model events
-    $event_pump.on('model_read_success', function(e, data) {
-        view.build_table(data);
     });
 
-    $event_pump.on('model_error', function(e, xhr, textStatus, errorThrown) {
-        let error_msg = textStatus + ': ' + errorThrown + ' - ' + xhr.responseJSON.detail;
-        view.error(error_msg);
-        console.log(error_msg);
-    })
-
+    $('table').on('dblclick', 'tbody td.content', function (e) {
+        let $target = $(e.target).parent(),
+            person_id = $target.data('person_id'),
+            note_id = $target.data('note_id');
 
+        window.location = `people/${person_id}/notes/${note_id}`;
+    });
 }(ns.model, ns.view));