A lightweight data-binding (or so-called mvvm) library, providing both declarative template and imperative call ways.
"domod" is named from "DOM", "Model" and their two-way relationship.
Philosophy
- Connection, relation, dependency. No matter it is data or dom, it is a tree. Tree and tree node relations make up graphs.
- Reactive programming.
Simple Application
A simple application:
const state = count: 0 { thiscount++ // `this` points to `state` } DMD const view = ` <div> <h1 m-style="{ color: $negative ? 'red' : 'green' }">{{$count}}</h1> <button m-onclick="$count = $count - 1">-</button> <button m-onclick="$increase()">+</button> </div>`
API
An online demo.
An example of a form:
gender: Male Female mobile: You input: {{$parse($form.mobile)}}. {{$form.mobile}} is {{$mobileInputStatus}}! age: {{$val}} city: {{$val.code}}.{{$val.name}}
Advance
Imperative Calling
Providing a data object:
var store = value: '1';
Now assign a property color
which would be computed from the property value
.
There are two methods available, kernel
and relate
.
The kernel
method, which is actually a constructor function, accepts two parameters besides the data object: the property and its relation object.
store 'color' { return ? 'red' : 'green'; };
The relate
method, which is somehow a composition of kernel
, accepts one parameter besides the data object: an object representing a map from property names to relation objects.
domod;
Relation Object
A relation object can be declared with these properties:
Property | Effect |
---|---|
resultFrom | Do when the property is being got, and return the value computed. |
resultIn | Do when the property is being set. |
upstream | Other properties as the property's dependencies. |
dnstream | Other properties as the property's effects. |
Standalone Libraries
Kernel
See the code and doc for more.
ObservableArray
Also called OArray for short. See the code and doc for more.
License
MIT