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.