This project is read-only.

Computed Observable Example

This example explains how to take advantage of knockout.js computed observable.
There is no hard dependency on knockout.js, but if it is used, RedUI will take advantage of it's power.

See interactive example on http://www.redui.net

UI Model

{
    "windows": [
        {
            "name": "ComputedObservableExample",
            "title": "Computed Observable Example",
            "left": 500,
            "top": 100,
            "width": 400,
            "height": 400,
            "controls": [
                {
                    "name": "firstNameTextBox",
                    "type": "textbox",
                    "label": "First Name",
                    "bindsTo": "firstName"
                },
                {
                    "name": "lastNameTextBox",
                    "type": "textbox",
                    "label": "Last Name",
                    "bindsTo": "lastName"
                },
                {
                    "name": "fullNameTextBox",
                    "type": "textbox",
                    "label": "Full Name",
                    "bindsTo": "fullName"
                }
            ]
        }
    ]
}

Data Model

var customerData = {
	firstName: ko.observable(""),
	lastName: ko.observable("")
};

// Computed observable
customerData.fullName = ko.computed(function () { return this.firstName() + " " + this.lastName(); }, customerData);

Code

var exampleWindow = redui.createNewWindow("ComputedObservableExample");
exampleWindow.bind(customerData);

// Disable full text textbox
exampleWindow.fullNameTextBox.getElement().prop('readonly', true);

exampleWindow.show();


.

Last edited Mar 16, 2014 at 1:37 PM by artemkv, version 2

Comments

No comments yet.