Yahoo! Mojito: Part 1 – Hello World!

Yahoo! Mojito:: Part 1 - Hello World:: Artifacts

3. The “Hello World” message

Now that we have the default application up and running at port 80 and root path, it’s time to look at where the content of the website is coming from.

If you look into the mojits -> HelloMojit folder, you will find:

  • A file controller.server.js
  • A file views/index.mu.html

The controller has the business logic of working with the data, incoming request, application state and is responsible for providing the final data to be rendered by the view.

The view, in this case, is a mustache template (and hence the name index.mu.html) is fed the data by the controller for rendering.

Let us update the template (index.mu.html) to reflect the following:

<div id="{{mojit_view_id}}">
   {{message}}
</div>

and update the controller (controller.server.js) to the following:

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

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

        index: function(ac) {
            ac.done({ "message": "Hello World" });
        }

    };

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

Comments have been removed for brevity.

The template reads that it needs a key named “message” to be displayed.

The controller has an action index which reads I am done with my processing and the data to be used by the template has a key named “message” with a value “Hello World“.

Restart your server, open the URL in the browser and you should see the following:

Hurray! We now have a “Hello World” application up and running. And while doing this, we learnt about the following:

  1. Create a new Mojito Application
  2. Create a mojit
  3. Register a mojit in application configuration file
  4. Configure / change the port number
  5. Configure route mapping
  6. View template of a mojit
  7. Basic configuration of controller to provide content for the view

Now it’s time to go deeper – create a form, process incoming data and generate data for the output view.

Because that’s going to be a long enough article in itself, I’ll put this in my next post!

 

Notice: This work is licensed under a BY-NC-SA. Permalink: Yahoo! Mojito: Part 1 – Hello World!

Leave a Reply

Your email address will not be published. Required fields are marked *

question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen

*