Variables in Components

You can use variables in components. There are several scoping options:

1. Variables can be shared with the document. To do this, do not include any variable scoping options on your component and make sure there are no variable scoping options on any outer components. You can use event scoping options, but not the variable scoping ones.
2. Components can be given a strictlyPrivateVars option. This means that no variables from an upper scope will enter the component from above. This gives you an isolated variables component scope. If you were writing a re-usable component that needed to have completely separate variables from the rest of the page, you would use this option on the outer component.
3. Components can be given a privateVars option. This still allows inheritance of variables from outer scopes, but it gives you private variables inside the component itself that do not spread into upper components. You don't use privateVars and strictlyPrivateVars on the same component. It's either one or the other.
4. If you don't use any scoping options on an inner component, it will just inherit all the variables from the containing component and it won't have its own variable scope.

A very workable way to write a re-usable component that can be placed many times on the same page, is to have the outer component with the option of strictlyPrivateVars, and have the inner components having no scope set at all or privateVars if you need further private variables or are running ajax calls and want the returning {$HTML} variable to be unique to that component. This gives you shared variables for the main component and sub-components, with the flexibility of further private variables in sub-components if you need them.

strictlyPrivateVars

This example demonstrates the syntax with strictlyPrivateVars:

body:init {
    render-after-begin: "<hello-world></hello-world>";
}

@component hello-world strictlyPrivateVars {
    &:beforeComponentOpen {
        $myVar: "a value";
    }
    html {
        <p>{$myVar}</p>
    }
}

In that example the myVar variable is not available in the document scope, and it would also not be available in any outer component scope if this component was drawn inside another component.

Note: if you need access to a variable outside of the component set with strictlyPrivateVars, then you will need to "pass the variable in" via the host tag. See the Passing in Variables section for how to do that.

privateVars

You would use the privateVars scope when you need private variables for the component but also need access to variables higher up in the component "tree", or from the document scope if this was the outer component.

This example demonstrates the syntax with privateVars as an inner sub-component:

body:init {
    render-after-begin: "<outer-block></outer-block>";
}

@component outer-block strictlyPrivateVars {
    &:beforeComponentOpen {
        $someText: "Here is a random number:";
    }
    html {
    <div>
        <inner-block></inner-block>
        <inner-block></inner-block>
        <inner-block></inner-block>
    </div>
    }
}

@component inner-block privateVars {
    &:beforeComponentOpen {
        $randomNumber: Math.floor(Math.random() * 100);
    }
    html {
        <p>{$someText} {$randomNumber}</p>
    }
}

In that example, the inner sub-component is drawn 3 times and 3 random numbers are drawn on the page next to the text "Here is a random number:".

The private option

Using private as an option is a shorthand for privateEvents and privateVars.

The strictlyPrivate option

Using strictlyPrivate as an option is a shorthand for strictlyPrivateEvents and strictlyPrivateVars.