2. Process the incoming data

Note that the technique that we are using in our case to accept incoming data is the traditional form submit. All we need to have is access to the value for the key named “name” (see form earlier).

Mojito provides a whole bunch of “addons” (a.k.a. plugins) that can be optionally used in any mojit. We will use the “params” addon that allows me to parse incoming data (parameters).

The business logic – including parsing incoming data, error handling etc – has to be in the controller. Because we are submitting the form to “/” which is mapped to “hello_mojit.index” in routes.json, the action / function that needs update is the controller-index function. Update the controller to reflect the following code:

YUI.add('HelloMojit', function(Y, NAME) {
    Y.mojito.controllers[NAME] = {

        init: function(config) {
            this.config = config;
        },

        index: function(ac) {
            // You can use ac.params.url('key') for HTTP-GET parameters
            var name = ac.params.body('name');
            var msg = name ? "Hello " + name : '';
            ac.done({ "message": msg });
        }

    };

}, '0.0.1', {requires: ['mojito', 'HelloMojitModelFoo',
  'mojito-params-addon']});

And subsequently, we need to update the view as well… so that message is displayed:

<div id="{{mojit_view_id}}">
    <form method='post' action='/'>
        <div>Enter Name: <input type='text' name='name' /></div>
        <div><input type='submit' value='Submit' /></div>
    </form>

    <div>
        {{message}}
    </div>
</div>

With all these changes in place, restart the server, browse to the page, type in your name and click submit to see the results:

To summarize, in this article, we looked at:

1. Accepting data through form post (configuring routes.json)
2. Processing incoming data in controller