added some spine: view controllers

src/main/html/javascript/swagger-ui.js

@@ -1,4 +1,18 @@
 jQuery(function($) {
+
+    // The following heirarchy is followed by these view controllers
+    // ResourceListController
+    //     >>> ResourceController
+    //         >>> ApiController
+    //             >>> OperationController
+
+    var ResourceListController = Spine.Controller.create({
+        proxied: ["addAll", "addOne"],
+
+        ApiResource: null,
+
+        init: function() {
+
             // create and initialize SwaggerService
             var hostUrl = "http://swagr.api.wordnik.com/v4";
 
@@ -7,55 +21,102 @@ jQuery(function($) {
             swaggerService.init();
 
             // Create convenience references to Spine models
-    var ApiResource = swaggerService.ApiResource();
+            this.ApiResource = swaggerService.ApiResource();
             
-    // Register a callback for when apis are loaded
+            this.ApiResource.bind("refresh", this.addAll);
-    ApiResource.bind("refresh", apisLoaded);
+        },
 
-    function apisLoaded() {
+        addAll: function() {
-        for (var i = 0; i < ApiResource.all().length; i++) {
+            this.ApiResource.each(this.addOne);
-            var apiResource = ApiResource.all()[i];
+        },
-            log("------------- apiResource : " + apiResource.name);
 
-            $("#resourceTemplate").tmpl(apiResource).appendTo("#resources");
+        addOne: function(apiResource) {
+            ResourceController.init({item: apiResource, container: "#resources"});
+        }
+    });
 
-//            apiResource.apiList.logAll();
+    var ResourceController = Spine.Controller.create({
-            var resourceApisContainer = "#" + apiResource.name + "_endpoint_list";
+        proxied: ["renderApi", "renderOperation"],
-            log("resourceApisContainer = " + resourceApisContainer);
+
-            for (var j = 0; j < apiResource.apiList.all().length; j++) {
+        templateName: "#resourceTemplate",
-                var api = apiResource.apiList.all()[j];
+        apiResource: null,
-                $("#apiTemplate").tmpl(api).appendTo(resourceApisContainer);
+        apiList: null,
-                renderOperations(api);
+        modelList: null,
+
+        init: function() {
+            this.render();
+
+            this.apiResource = this.item;
+            this.apiList = this.apiResource.apiList;
+            this.modelList = this.apiResource.modelList;
+
+//            log("------------- apiResource : " + this.apiResource.name);
+//            this.apiList.logAll();
+//            this.modelList.logAll();
+
+            this.apiList.each(this.renderApi);
+
+        },
+
+        render: function() {
+            $(this.templateName).tmpl(this.item).appendTo(this.container);
+        },
+
+        renderApi: function(api) {
+            var resourceApisContainer = "#" + this.apiResource.name + "_endpoint_list";
+            ApiController.init({item: api, container: resourceApisContainer});
         }
 
-//            apiResource.modelList.logAll();
+    });
-            for (var k = 0; k < apiResource.modelList.all().length; k++) {
-                var apiModel = apiResource.modelList.all()[k];
-            }
-        }
 
-        if (window.console) console.log("apis loaded");
-    }
 
-    function renderOperations(api) {
+    var ApiController = Spine.Controller.create({
-        if (api.operations && api.operations.count() > 0) {
+        proxied: ["renderOperation"],
-            var operationsContainer = "#" + api.name + "_endpoint_" + api.id + "_operations";
-            for (var o = 0; o < api.operations.all().length; o++) {
-                var operation = api.operations.all()[o];
-                $("#operationTemplate").tmpl(operation).appendTo(operationsContainer);
-                renderParameters(operation, $);
-            }
-        }
-    }
 
-    function renderParameters(operation) {
+        api: null,
-        if(operation.parameters && operation.parameters.count() > 0) {
+        templateName: "#apiTemplate",
-            var isGetOpetation = (operation.httpMethodLowercase == "get");
 
-            var operationParamsContainer = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_params";
+        init: function() {
+            this.render();
+
+            this.api = this.item;
+
+            this.api.operations.each(this.renderOperation);
+        },
+
+        render: function() {
+            $(this.templateName).tmpl(this.item).appendTo(this.container);
+        },
+
+        renderOperation: function(operation) {
+            var operationsContainer = "#" + this.api.name + "_endpoint_" + this.api.id + "_operations";
+            OperationController.init({item: operation, container: operationsContainer});
+        }
+    });
+
+    var OperationController = Spine.Controller.create({
+        operation: null,
+        templateName: "#operationTemplate",
+
+        init: function() {
+            this.render();
+
+            this.operation = this.item;
+            this.renderParams();
+        },
+
+        render: function() {
+            $(this.templateName).tmpl(this.item).appendTo(this.container);
+        },
+
+        renderParams: function() {
+            if (this.operation.parameters && this.operation.parameters.count() > 0) {
+                var isGetOpetation = (this.operation.httpMethodLowercase == "get");
+
+                var operationParamsContainer = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.id + "_params";
                 log("operationParamsContainer = " + operationParamsContainer);
-            for (var p = 0; p < operation.parameters.all().length; p++) {
+                for (var p = 0; p < this.operation.parameters.count(); p++) {
-                var param = operation.parameters.all()[p];
+                    var param = this.operation.parameters.all()[p];
 
                     var templateName = "#paramTemplate";
                     if (param.required)
@@ -65,12 +126,13 @@ jQuery(function($) {
                         templateName += "ReadOnly";
 
                     $(templateName).tmpl(param).appendTo(operationParamsContainer);
+                    log("adding " + $(templateName).tmpl(param) + " TO " + operationParamsContainer);
 
                     if (!isGetOpetation) {
-                    var submitButtonId = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_content_sandbox_response_button";
+                        var submitButtonId = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.id + "_content_sandbox_response_button";
                         $(submitButtonId).hide();
 
-                    var valueHeader = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_value_header";
+                        var valueHeader = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.id + "_value_header";
                         $(valueHeader).html("Default Value");
 
                     }
@@ -79,6 +141,9 @@ jQuery(function($) {
                 }
             }
         }
+    });
+
+    var resourceListController = ResourceListController.init();
 
 });