Basic Code Structure

Once you've given some thought to the model and view for your component, it's probably time to start sketching out some code. We have a template of an Infusion Component JavaScript file that you should feel free to start with, and modify. The code block below shows the key parts of the template. Each section will be explained (but not necessarily in the order they occur in the file). We'll also explain the various Infusion Framework concepts that are embodied in the code, and the Framework functions that are used.

fluid_1_1 = fluid_1_1 || {};

(function($, fluid) {

    var privateFunc = function() {
        // some private function 
    };
    
    // creator function
    nameSpace.componentName = function(container, options) {
        var that = fluid.initView("nameSpace.componentName", container, options);
        
        that.publicFunc = function() {
            // some public function
        };
        
        return that;
    };
    //end of creator function
    
    //start of defaults
    fluid.defaults("componentName", {
        option1Name: {
            key: value
        },
        option2Name: {
            key1: value1,
            key2: value2
        }
    });
    // end of defaults

})(jQuery, fluid_1_1);

You might notice that

• The code consist roughly of three basic sections:
  1. some private functions,
  2. a creator function, and
  3. a call to fluid.defaults()
• These three sections are wrapped in an enclosure.

The following sections of this tutorial will briefly explain each of these three sections (though not in that exact order). Later sections of the tutorial will dive into some of these topics in more detail.