mojito-client-lite

This is a replacement for the HTMLFrameMojit. It's a Mojito Mojit with a smaller client side footprint.

npm install mojito-client-lite
4 downloads in the last month

Mojito Client Lite

IN DEVELOPMENT: This is a bundle of mojits for the Yahoo! Mojito framework. It provides a smaller client side footprint and integration with Y.View.

cd <your-mojito-app>
npm link <this-dir>

ac.html

An addon to use in place of the HTMLFrameMojit. Generates a html wrapper when run in the server context.

ac.html.done

YUI.add("example-ctrl", function(Y, NAME) {
    Y.namespace("mojito.controllers")[NAME] = {
        index: function(ac) {
            ac.html.done({msg: "Hello world"});
        }
    };
}, "0.1.0", {requires: ["mojito", "yahoo-mojito-addon-html"]});

mojitoClientLite

Used in place of the default Mojito Client Runtime. To activate it add mojitoClientLite: true to application.json when you are using ac.html for generating your HTML.

[
    {
        "settings": ["master"],
        "mojitoClientLite": true
    }
]

binder

When using mojitoClientLite: true it is important to note that the binder api has changed to support the Y.View method of working with the DOM. They are;

  • Replacing the init method with an initializer method.
  • The value returned by the YUI Module can be either an object or a function.
    • If the value is a function the new operator will be called on it.
    • If the value is an object it will be passed to the Object.create function.
  • The binder now comes with the Mojit Proxy attached to the attribute mp by default.
  • If the binder is a Y.View instance the DOM node is automatically set.

Object based binder;

YUI.add('example_binder_index', function (Y, NAME) {
    Y.namespace('mojito.binders')[NAME] = {
        initializer: function () {
            // ...
        },
        bind: function (node) {
            Y.log("Yo, the binder is working!");
        }
    };
}, '0.0.1', {requires: ["mojito-client-lite"]});

Y.View based binder;

YUI.add('example_binder_index', function (Y, NAME) {
    Y.namespace('mojito.binders')[NAME] = Y.Base.create(NAME, Y.View, [], {
        events: {
            div: {
                click: "logit"
            }
        },
        initializer: function () {
            // ...
        },
        logit: function () {
            this.mp.invoke("index", function (err, data) {
                Y.log("A click happened");
            });
        }
    });
}, '0.0.1', {requires: ["mojito-client-lite", "view"]});

initializer

Optional: This function is called after the creation of the binder but before bind.

bind

Optional: This function is called after initializer. It is passed a single argument which is a YUI Node object containing the Mojits DOM element that id="{{mojit_view_id}}" was added to.

mp.invoke

mp.getViewId

mp.destroySelf

mp.destroyChild

mp.destroyChildren

mp.getFromUrl

npm loves you