Fork me on GitHub

OIG

A little but of XUL, XForms, XMLEvents, XInclude and MVVM for the evergreen browsers (Chrome and Opera tested, WebKit). Just to keep up to date with latest technologies before I get too old.

No routing , iOC or things like that. Just pure MVVM Pattern explained with use of some custom html elements. iOC and routing can easily be added by pluging in other libraries.

di example
example on how to use dependency injection
observer context
example on how to freeze objects (immutable)
binding element
data binding supporting one-way(default), two-way and once binding
context element
Like in XAML... adds a ViewModel to the view
if element
conditional elements by using oig-if, kinda like xsl:if
include element
include text,html or xml content inspired by XInclude. Used to build up this page with code and examples
listener element
event listening based on XForms, XMLEvents and XUL Listeners.
react element
Integrate ReactJS
template element
Use microtemplates (underscore) by default. Pluggable custom template engines like handlebars in example

Dependency injection

example code

observer context Using Object.freeze :-)

Objects on the viewModel that are frozen (Object.freeze) will not be databound. Also works on Arrays, items in arrays etc....just freeze what needs to be frozen.

example code

binding element basic text (parent) binding

All attributes defined on the oig-binding element will be set on the bound element. Bindings are namespace aware. Meaning that Attr.namespaceURI and prefix will be preserved and setAttributeNS will be called on bound element.

Attribute bindings will be evaluated as javascript expressions. 

oig-binding style="'color:' + color"

example code

binding element manual 2-way binding

Manual two way binding can be done using oig-listeners. Normally changes occur in the view after a user interaction which means that listening to change is a good way to detect changes.
example code

binding element next sibling with manual 2-way binding

example code

binding element previous sibling

example code

Context element

Binding elements are used to provide 'context' to the view. This means that a viewModel will be attached to a HTMLDivElement so that all it's children can use this viewModel for data binding

In the example below a basic viewModel is constructed by defining a new property on the oig.viewModels object

When a ViewModel is used in a View(Component) than it will be referred to as 'dataContext'

code

if element simple example

example code

include element basic inclusion

example code

listener element

example code

React element Using JSX Components

example code

Template element

example code