« home
Steun ons

Clientside Models (view-data on the client)

The model-data that was used to render the view on the server (that is: this.props inside the views), is automaticly available on the client. This way, you can pass through data and make it usable inside your clientside app.

This is a powerful way, because the data is baked inside the page’s html request: you don’t need to make an extra request on the client to retrieve data.

Equals this.props of the view

const React = require('react');

class Models extends React.Component {
    render() {
        return (
            // this.props <-- server side generated model
            <div>Version of this webapp: {this.props.__appProps.version}</div>
        );
    }
}

module.exports = Models;

Access this.props in the App

All web apps run with an instance of src/app.js. This app can access the current props throug this.getProps() or this.getClonedProps(). When building the views, you need to access the app first. Be careful to initiate the app inside componentDidMount --> only at that time you can initiate getApp():

view

const React = require('react'),
    appModule = require('app'),

class MyView extends React.Component {

    componentDidMount() {
        this.app = appModule.getApp();
    }

    handleClick() {
        this.app.logProps();
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>log the props</button>
            </div>
        );
    }
}

module.exports = MyView;

app.js

const MainAppRouterClass = require('itsa-react-server/lib/ClientApp');

let appInstance;
let MainApp = MainAppRouterClass.subClass(function() {
    // inititiate anything here
},
{
    logProps() {
        console.log(this.app.getClonedProps());
    },

    destroy: function() {
        // destroy anything here
    }
});

const getApp = () => {
    if (!appInstance) {
        appInstance = new MainApp();
    }
    return appInstance;
};

module.exports = {
    getApp
};

Refresh this.props by the client

The client can refresh this.props by itself. The App has a property router with a method reloadView():

view

const React = require('react'),
    appModule = require('app'),

class MyView extends React.Component {

    componentDidMount() {
        this.app = appModule.getApp();
    }

    handleClick() {
        this.app.router.reloadView();
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>reload view</button>
            </div>
        );
    }
}

module.exports = MyView;

Server will push new this.props when it restarts

Whenever the server restarts, the client will be notified (through SocketIO). The clientapp sees a difference of this.props.__appPros.serverStartup and will request a newthis.props` from the server. The server will not retain the state of all clients, instead the clients itself will ask for new this.props while identifying on which page they currently retain.

Use server side code to trigger a push of this.props to the clients

You can use the server-side socket server to push new this.props to the clients. Or, actually, send the clients a request to reload their this.props (explained above)

const SocketServer = require('itsa-react-server/lib/socketio/socketserver');

const refreshAllClients = () => {
    socketServerInstance.updateAllClients();
};

module.exports = {
    refreshAllClients
};

Currently, only all clients can be triggered al together.

OFFLINE