1.0.0-beta4

This release features various performance improvements that result in jide.js being one of the fastest options for creating web applications.

It also fixes the huge IE bug that prevented the previous version of jide.js from being compatible with IE.

1.0.0-beta3

The new jide.js version 1.0.0-beta3 adds full support for usage with Browserify and npm. By using the Browserify version of jide.js instead of the AMD version, you get full access to npm modules and can share code between your client and node.js server. In addition, it contains a number of useful bugfixes (the foreach template binding can now work with a list of primitive values).
We have also improved our Developer Guide to make it easier to learn how to use jide.js.

1.0.0-beta2

This release provides a significantly improved installation procedure, with jide.js now being available through npm, bower and yeoman as well as new features that enable much cleaner, simpler and more flexible separation of concerns. Controls can now be designed in HTML templates with included data binding from your data model to HTML elements.

With the new templating feature, you can strictly separate your control from its HTML representation, significantly reducing code duplication while enabling you to completely change the controls HTML representation if you need something other than the default.

Creating custom controls is now easier than ever. Define your data model, a view model and combine them together with data bound templates.

Let’s explore this by creating a simple todo control. Start with the data and view model:

define([
    'jidejs/base/Class',
    'jidejs/base/ObservableList',
    'jidejs/ui/Control',
    'jidejs/ui/Skin',

    'text!app/view/todoPage.html'
], function(
    Class, ObservableList, Control, Skin,
    TodoPageTemplate
) {
    function TodoPage(config) {
        if(!config) config = {};

        // get the todo items from the config or create a fresh list
        if(!config.items) config.items = new ObservableList();
        else config.items = ObservableList(config.items);
        this.items = config.items;
        delete config.items; // don't want to reset the items later on

        Control.call(this, config);
        this.classList.add('page');
        this.classList.add('todo');
    }
    Class(TodoPage).extends(Control);

    TodoPage.Skin = Skin.create(Skin, {
        template: TodoPageTemplate,

        convertTodoItem: function(item) {
            return item.title;
        },

        insertNewItem: function() {
            this.queryComponent('x-input').then(function(taskField) {
                this.component.items.add({
                    title: taskField.text,
                    done: false
                });
                taskField.text = '';
            }.bind(this));
        },

        deleteSelectedItem: function() {
            this.queryComponent('x-todoitems').then(function(todoItems) {
                var items = todoItems.items,
                    selectionModel = todoItems.selectionModel;
                if(selectionModel.selectedItem) {
                    items.remove(selectionModel.selectedItem);
                }
            });
        }
    });
    return TodoPage;
});

And finish the control with a short template that binds data and view together:

<template>
    <div>
        <input type="text" pseudo="x-input" bind="
            is: 'jidejs/ui/control/TextField',
            on: { action: insertNewItem.bind($item) }
        ">
    </div>
    <div>
        <ul pseudo="x-todoitems" bind="
            is: 'jidejs/ui/control/ListView',
            items: component.items,
            converter: convertTodoItem
        "></ul>
    </div>
    <div>
        <button bind="
            is: 'jidejs/ui/control/Button',
            on: { action: deleteSelectedItem.bind($item) }
        " text="Delete selected"></button>
    </div>
</template>

This release is a significant improvement over the previous version. You can now install jide.js and create a new jide.js project in seconds and use the new templating features to take full control over the appearance and behavior of jide.js controls or use them to create your own custom controls with ease.

For a full introduction, take a look at the new guides on the jide.js website.