https://github.com/shenfe/domod
A lightweight data-binding (or so-called mvvm) approach, providing both declarative and imperative ways.
https://github.com/shenfe/domod
data-binding javascript reactive template
Last synced: 7 months ago
JSON representation
A lightweight data-binding (or so-called mvvm) approach, providing both declarative and imperative ways.
- Host: GitHub
- URL: https://github.com/shenfe/domod
- Owner: shenfe
- License: mit
- Created: 2017-08-05T04:04:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-20T05:13:01.000Z (almost 8 years ago)
- Last Synced: 2025-08-20T01:31:05.927Z (7 months ago)
- Topics: data-binding, javascript, reactive, template
- Language: JavaScript
- Homepage:
- Size: 554 KB
- Stars: 11
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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. Whether data or dom, it is a tree. Tree and tree node relations make up graphs.
* Reactive programming.
## Simple Application
A simple application:
```js
const state = {
count: 0,
increase() {
this.count++ // `this` points to `state`
}
}
DMD.relate(state, {
negative: {
resultFrom() {
return this.count < 0 // `this` points to `state`
}
}
})
const view = `
{{$count}}
-
+
`
DMD('#app', view, state)
```
## API
An online [demo](http://hengwu.me/repos/domod/domod3.html).
A more complex example of a form:
```html
gender:
Male
Female
mobile:
You input: {{$parse($form.mobile)}}.
{{$form.mobile}} is {{$mobileInputStatus}}!
age:
{{$val}}
city:
{{$val.code}}.{{$val.name}}
var store = {
parse: function (v) {
return parseInt(v);
},
validateMobile: function () {
return /^1[3|4|5|8][0-9]\d{8}$/.test(this.form.mobile);
},
form: {
gender: 'female',
mobile: '15210001000',
age: {
value: '37-54',
options: [
'0-18',
'19-36',
'37-54',
'55-200'
]
},
city: {
value: '1',
options: [
{ code: 1, name: 'beijing' },
{ code: 2, name: 'newyork' },
{ code: 3, name: 'tokyo' },
{ code: 4, name: 'london' },
{ code: 5, name: 'paris' }
]
}
}
};
/* Watch a property mutation */
store.mobileInputStatus = store.validateMobile();
DMD.relate(store, {
'form.mobile': {
dnstream: 'mobileInputStatus',
resultIn: function (v) {
var newVal = store.validateMobile();
console.log(`mobile is ${newVal}`);
DMD.$(store, 'mobileInputStatus', newVal);
}
}
});
DMD('#form1', store);
```
## Advance
### Imperative Calling
Providing a data object:
```js
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.
```js
new domod.kernel(store, 'color', {
resultFrom: function () {
return isNaN(parseInt(store.value)) ? '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.
```js
domod.relate(store, {
color: {
resultFrom: function () {
return isNaN(parseInt(store.value)) ? 'red' : 'green';
}
}
});
```
### 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](https://github.com/shenfe/domod/blob/master/src/Kernel.js) and [doc](https://github.com/shenfe/domod/blob/master/doc/Kernel.md) for more.
### ObservableArray
Also called OArray for short. See the [code](https://github.com/shenfe/domod/blob/master/src/OArray.js) and [doc](https://github.com/shenfe/domod/blob/master/doc/ObservableArray.md) for more.
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright © 2017-present, [shenfe](https://github.com/shenfe)