Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

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.

  • No labels