Skip to content

develop_view_ex_04_understandProjectController.md

Latest commit

 

History

History
88 lines (59 loc) · 2.68 KB

develop_view_ex_04_understandProjectController.md

File metadata and controls

88 lines (59 loc) · 2.68 KB

< Views and HTML Animation

Views and HTML Animation : Understand the Project Controller.

Let's analyze how your default Program Controller works.

To begin with, open up your default Program Controller in [project]/assets/opstools/[ToolName]/controllers/[ToolName].js.

It should look like this (without comments) :

steal(
        // List your Controller's dependencies here:
        'appdev',
        '//OpsPortal/classes/OpsTool.js',
        '/opstools/[ToolName]/views/[ToolName]/[ToolName].ejs',
function(){

    AD.Control.OpsTool.extend('[ToolName]', {

        init: function (element, options) {
            var self = this;
            options = AD.defaults({
                    templateDOM: '//opstools/[ToolName]/views/[ToolName]/[ToolName].ejs',
                    resize_notification: '[ToolName].resize'
            }, options);
            this.options = options;

            // Call parent init
            this._super(element, options);

            this.initDOM();
        },

        initDOM: function () {

            this.element.html(can.view(this.options.templateDOM, {} ));

        }
    });

});
Dependencies

The first part of the file specifies the dependencies required before this code can be run. In this case we are using JavascriptMVC's steal library to specify our dependencies.

steal(
        // List your Controller's dependencies here:
        'appdev',
        '//OpsPortal/classes/OpsTool.js',
        '/opstools/[ToolName]/views/[ToolName]/[ToolName].ejs',
function(){

Currently this controller depends on our

  • appdev library
  • the OpsTool.js class defined in our OpsPortal
  • and the default view [ToolName].ejs

Note: all the paths are specified from the [sails]/assets directory.

StealJS will load all those packages before running the fn() that contains our Controller.

Controller Creation

Our appdev library provides an API for creating new OpsTools:

AD.Control.OpsTool.extend( [ControllerName], { Controller Definition } );

in our { Controller Definition } we defined two methods:

  • init(): called by CanJS objects when they are created
  • initDom(): called at the end of init() to setup our initial view.

our initDom() actually pushes our HTML view to the DOM:

  • this.element.html() : this controller is attached to a DOM element, and we are setting the html() of that element to the data we send the function: which is from
  • can.view( 'templateURL', {data})

< Views and HTML Animation
Next: Add the List Controller >