Scripting

Each view file and component can be scripted.

The whole JavaScript code put inside the <script /> tag.

In the view file:

<script></script>

or in a component:

<component name="Avatar">
    <script></script>
</component>

View lifecycle

Inside the <sript /> tag you can connect to five signals:

  • this.onCreate(),
  • this.onBeforeRender(),
  • this.onRender(),
  • this.onBeforeRevert(),
  • this.onRevert().

View once created is reusing. Because of that, onCreate signal is called only when there is no free views to use and a new one has to be created.

When a view needs to be put into a document, it's rendered (onBeforeRender, onRender).

When a view is no longer needed, it's reverted (onBeforeRevert, onRevert).

Reverted views can be rendered later.

Custom methods

Custom methods should be created inside the onCreate signal as lambda functions.

It ensures, that you have always the proper context (this) inside all methods.

View context can be used in String Interpolation.

<script>
this.onCreate(function () {
    this.plusOne = (number) => {
        return number + 1;
    };
});
</script>
<p>${this.plusOne(2)}</p> <!-- <p>3</p> -->

this.state

this.state is a Dict. Use it to store custom data for a rendered view.

It's save to use. Automatically cleared when view is reverted.

Data can be read in String Interpolation under the ${state} object.

Default state must be defined in onBeforeRender signal.

<script>
this.onCreate(function () {
    this.increment = () => {
        this.state.set('counterValue', this.state.counterValue + 1);
    };
});
this.onBeforeRender(function () {
    this.state.set('counterValue', 1);
    this.increment();
});
</script>
<p>Counter: ${state.counterValue}</p> <!-- <p>Counter: 2</p> -->

this.refs

All nodes with ref tags are available under the this.refs object.

<script>
this.onRender(function () {
    this.refs.image.props.set('src', "rsc:background");
});
</script>
<img ref="image" /> <!-- <img src="rsc:background" /> -->

If node with ref tag renders a component, it refers to the this context and not no the Virtual DOM element.

<component name="Issue">
    <script>
    this.onCreate(function () {
        this.getTitle = () => 'More gifs!';
    });
    </script>
</component>

<component name="IssueList">
    <script>
    this.onRender(function () {
        console.log(this.refs.firstIssue.getTitle());
        // More gifs!
    });
    </script>
    <Issue ref="firstIssue" />
</component>

<IssueList />

This object is available in String Interpolation as ${refs}.

this.node

It refers to the main view or component element.

More about it you'll learn in the next chapter but you can use it to e.g. find an element by a selector.

<script>
this.onBeforeRender(function () {
    const spans = this.node.queryAll('p > span');
    console.log(spans);
    // [<span>first</span>, <span>third</span>]
});
</script>
<p><span>first</span> second <span>third</span></p>

this.props

this.props object contains properties used to create a component.

You should not change it.

Use it to configure creating components.

This object is available in String Interpolation as ${props}.

<component name="User">
    <script>
    this.onCreate(function () {
        console.log(this.props.nick);
        // testslover32
    });
    </script>

    <h1>${props.nick}</h1>
</component>

<User nick="testslover32" />

this.props is an instance of Dict and can be changed in runtime. Connect to this.props.onChange() signal if you want to detect it manually.

this.context

This property refers to a route used to render this view.

You can use to make, for instance, a HTTP request.

<script>
this.onBeforeRender(function () {
    this.context.app.networking.get('/users', (err, resp) => {});
});
</script>

... or to get a route.data.

More about it you'll learn in Routing chapter.

This object is available in String Interpolation as ${context}.

Script file

You can move your JavaScript code to separated file.

<script /> accepts src attribute. Use is with relative path.

<script src="./scriptFile.js" />

CoffeeScript support

If you like to use CoffeeScript, you can do it by specifying the filename attribute with the .coffee extension.

<script filename="view.coffee">
@onCreate ->
    @sum = (a, b) => a + b
</script>

results matching ""

    No results matching ""