Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin
{div:class=} {
Wiki Markup
Div
classtutorial-linear-nav

Span

:

class

=

tutorial-nav-left

}*

Previous:

* [

Basic

Component

Creation

-

Little

Components

]{span} {span:class=

Span
classtutorial-nav-centre

}[

Up

to

overview|Tutorial - Getting started with Infusion]{span} {span:class=

overview
Span
classtutorial-nav-right

}*

Next:

* [

Evented

Components]{span} {div}
Wiki Markup
{div:class=floatRight}
{panel:title= On This Page| borderStyle=solid| borderColor=#ccc| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div}
Wiki Markup
{div:class=floatRight} {panel:title= See Also| borderStyle=solid| borderColor=#ccc| bgColor=#fff} [Component Grades] [Infusion13:ChangeApplier] [Infusion13:ChangeApplier API] [Infusion13:Model Objects] [Component Lifecycle and autoInit] {panel} {div}

Components

Div
classfloatRight
Panel
borderColor#ccc
bgColor#fff
titleOn This Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5
Div
classfloatRight
Panel
borderColor#ccc
bgColor#fff
titleSee Also
borderStylesolid

Component Grades
ChangeApplier
ChangeApplier API
Model Objects
Component Lifecycle and autoInit

Many components manage an internal model. For example:

...

Code Block
javascript
javascript
fluid.defaults("tutorials.currencyConverter", {
    gradeNames: ["fluid.modelComponent", "autoInit"],
    model: {
        currentSelection: "euro",
        rates: {
            euro: 0.712,
            yen: 81.841,
            yuan: 6.609,
            usd: 1.02,
            rupee: 45.789
        }
    },
    finalInitFunction: "tutorials.currencyConverter.finalInit"
});

tutorials.currencyConverter.finalInit = function (that) {
    // Add methods to the component object
    that.updateCurrency = function (newCurrency) {
        that.applier.requestChange("currentSelection", newCurrency);
    };

    that.updateRate = function (currency, newRate) {
        that.applier.requestChange("rates." + currency, newRate);
    };

    that.convert = function (amount) {
        return amount * that.model.rates[that.model.currentSelection];
    };
};
{div:class=} {
Wiki Markup
Div
classtutorial-linear-nav

Span

:

class

=

tutorial-nav-left

}*

Previous:

* [

Basic

Component

Creation

-

Little

Components

]{span} {span:class=

Span
classtutorial-nav-centre

}[

Up

to

overview|Tutorial - Getting started with Infusion]{span} {span:class=

overview
Span
classtutorial-nav-right

}*

Next:

* [

Evented

Components

]{span} {div}