Mojito Conventions¶

MVC Structure¶

Your models, controllers, and views in Mojito applications are in your mojit directories in the following location:

• mojits/{mojit_name}/models/
• mojits/{mojit_name}/
• mojits/{mojit_name}/views/

Configuration¶

Configurations are found in either the .json or .yaml files in the application directory or under mojit directories. The configurations are composed of JSON or YAML, which is a superset of JSON. If both JSON and YAML versions of a configuration file exist, Mojito will use the configurations defined in the YAML file.

{
  "settings": [ "environment:development" ],
  "specs": {
    "test": {
      "type": "Test"
    }
  }
},
{
  "settings": [ "environment:production" ],
  "specs": {
    "test": {
      "type": "Production"
    }
  }
},

{
  "settings": [ "environment:development" ],
  "staticHandling": {
     "forceUpdate": true
  },
  "yui":{
    "config": {
      "debug": true,
      "logLevel": "debug"
    }
  }
},
{
  "settings": [ "environment:production" ],
  "staticHandling": {
     "forceUpdate": false
  },
  "yui":{
    "config": {
         "debug": false,
         "logLevel": "none"
    }
  }
},

"root": {
  "path": "/",
  "call": "frame.index"
}

Modules¶

Mojito code is organized into files that are custom YUI modules. In the YUI module, you use YUI.add to register a string as the name of the custom YUI modules. See the Mojits section for more module information for controllers, models, binders, and tests.

Tests¶

Mojit Instances¶

The instance is defined in the application configuration file application.json and then created by Mojito when the application is started. The naming convention of mojit instances is to use a lower-case string, much as you would use a lower-case string to name an object in JavaScript.

Mojit Definitions¶

Mojit definitions are the files and code that constitute the mojit and are created with the command mojito create mojit <mojit_name>.

...
  ...
    index: function(ac) {
      ac.models.get('model').getData(function(err, data) {
        ...
      }
    }
  ...
}, '0.0.1', {requires: ['mojito', 'mojito-models-addon']});

Tests¶

Pathname¶

{application_name}/yui_modules/{module_name}.{affinity}.js

Using the YUI Modules¶

The YUI module that you created registers the YUI module name with YUI.add. In your mojit code (controllers, binders, models), you specify the module name as a dependency in the requires array. Your mojit code can then access the YUI module through the Y instance.

For example, suppose the YUI module string-helper is registered in the file string_helper.server.js as shown below:

YUI.add('string-helper', function (Y) {
  // Code goes here.
  ...

  // Add dependencies for your module in the `requires` array.
}, '1.0.0', { requires: []});

Your controller could then access the module by requiring it. The example below shows how you would require our string-helper module and provides a possible example of using the helper:

YUI.add('body', function (Y, NAME) {
  Y.namespace('mojito.binders')[NAME] = {

    index: function (ac) {
        var str_helper = Y.StringHelper();
        Y.log(str_helper.strip(" this is just a hypothetical example ");
    }
  }
}, '1.0.0', { requires: ['mojito-models-addon', 'string-helper']});

Built-In Addons¶

Mojito comes with built-in addons that are accessible through the ActionContext object. To access a built-in addon from a controller, you add the string mojito-{addon}-addon to the requires array, where {addon} could be any of the following:

• assets - Assets addon for managing assets
• config - Config addon for handling configurations
• composite - Composite addon to execute child mojits
• cookies - Cookie addon for getting/setting cookies
• data - Data addon for sharing data
• helpers - Helpers addon for registering Handlebars helpers
• http - Http addon for getting and setting HTTP headers, request information.
• intl - Intl addon for localization
• meta - Meta addon for getting and merging meta data of child mojits.
• models - Models addon for accessing models
• params - Params addon for managing parameters
• partial - Partials addon for rendering partials.
• url - Url addon for creating and finding URLs.

Custom Addons¶

You can also create your own addons that you can include in controllers and then access through the ActionContext object just like the built-in addons.

Tests¶

The module names for both controller and model unit tests using the following naming convention:

• {lowercased_mojit_name}-tests - (controller unit tests)
• {lowercased_mojit_name}-model-tests - (model unit tests)

Location¶

For application-level (or shared) assets, the recommended location would be the following directories:

• {application_name}/assets/css/
• {application_name}/assets/js/

For mojit-level assets, the recommended location is the following:

• {mojit_name}/assets/css/
• {mojit_name}/assets/js/

Pathname¶

Mojito registers a path to the assets based on a prefix, a source path, and the relative path to the assets. The prefix is the basename directory of the static URL. The default value for the prefix is /static/, but you can define the prefix with the staticHandling.prefix property in application.json.

The source path for assets would either be the application or the mojit depending on the level of the resource. The relative path is the path relative to the source path, which in the case of assets would be either /assets/css/ or /assets/js/.

Thus, the default path to assets would have the following syntax: /{prefix}/{source_path}/{relative_path} For example, the default path to the application-level CSS asset index.css for the application NewsAggregator would be /static/NewsAggregator/assets/css/index.css.

Using Static Assets¶

There are three main ways to use static assets in your application:

• Specify the asset paths in application.json for the HTMLFrameMojit` to attach to the page. See Code Examples: Attaching Assets with HTMLFrameMojit.
• Hardcode the static path to the assets in your template. See Code Examples: Adding Assets
• Dynamically attach the assets with the Assets addon. See Using the Assets Addon.