iugo

Set up a Javascript model in one line of code

The Iugo() constructor will listen for changes to the model and carry out actions as they occur. As a Web designer, you never need to worry about the content of the model again.

The model can be as complicated as you need and include object and arrays. To set default values, just include them in the object.

It can be added to at any point simply by setting a top level member, like: model.edition = "".

var model = new Iugo({
    isbn: "",
    title: "",
    description: "",
    author: {
        firstname: "",
        surname: ""
    }
});

Mark up your HTML with standards compliant class names

iugo will bind the model to the DOM and keep it in sync as your program makes changes to the data. Lists are created to mirror arrays and different member of objects can be assigned to different parts of the DOM tree

iugo will also substitute variable referenced in the page for their value in the model, using the ${path.to.variable} syntax.

<body>
<div>
    <p class="bindto-title"></p>
    <p class="bindto-author">
        by ${firstname} ${surname}
    </p>
    <p class="bindto-description"></p>
</div>
</body>

Add data to the model and the view will keep itself up to date.

Whether you are populating your page with content from an open API, like Twitter, your own Web service, or just data your Javascript has access to; updating your HTML is literally as simple as setting a Javascript variable.

$.get("http://example.com/rest/library?isbn=937382", function(book) {
    model = book;
});

Learn iugo in 3 easy steps

  1. Check out the example above on jsfiddle.net
  2. Take the tutorial, to build a Twitter client in 5 minutes
  3. RTFM, man!

iguo is open source software, distributed under the MIT license. So feel free to use it, share it or modify it however you want - even in commercial software.

If you would like to give something back you can contribute on the GitHub page.

Browser support

iugo should work fine on all modern browsers but has a dependency upon ECMAScript5 compliant Javascript engines. Roughly, that equates to IE9+, FireFox 4+, Safari 6+, Chrome 7+, Opera 12+. The project aims to actively support IE9+, Chrome 16+ and FireFox 16+; if something isn't working on one of those platforms it's a bug, please report it on the GitHub page.

However, there is still no guarantee that iugo will work on any browser. To paraphrase the license, it's your own responsibility if use this code and not this projects. This software is provided for free, so take it or leave it ☺

Development

iugo is a modular framework. At it's core is an event system which is used to trigger view controllers when a Javascript object (the model) is changed. Updating a model when an event is fired from the DOM is easy, iugo makes it just as easy to update the DOM when an event is fired from the model.

iugo is backed by qUnit tests, which you can run here or from the GitHub source code.

But I want 2-way data-binding!

No problem. Binding data from form inputs to a Javascript object has never been that tricky. Simply apply an "onchange" event listener to the inputs and update the model from there. That way you keep the model up to date with user inputs and iugo can manage the effects.

iugo does not take control of the binding from the DOM to the model because that is not a difficult task. iugo aims to be a lightweight, light-touch tool, so it only facilitates the tricky part: binding from the model to the DOM.

2k

minified & gzipped