domod

KO | EN

gitlite — search

#javascript #ai #go #android #machine-learning #rust #deep-learning #docker #macos #java #vue #awesome-list #pytorch #mcp

(★ 11)

A lightweight data-binding (or so-called mvvm) approach, providing both declarative and imperative ways.

domod 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![gzipped](http://img.badgesize.io/https://raw.githubusercontent.com/shenfe/domod/master/dist/domod.min.js?compression=gzip)
<a href="https://circleci.com/gh/shenfe/domod/tree/master"><img  src="https://img.shields.io/circleci/project/shenfe/domod/master.svg"></a>
<a href="https://www.npmjs.com/package/domod"><img src="https://img.shields.io/npm/v/domod.svg"></a>
![license](https://img.shields.io/npm/l/domod.svg)

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 = `
    <div>
        <h1 m-style="{ color: $negative ? 'red' : 'green' }">{{$count}}</h1>
        <button m-onclick="$count = $count - 1">-</button>
        <button m-onclick="$increase()">+</button>
    </div>
`

DMD('#app', view, state)
```

## API

An online [demo](http://hengwu.me/repos/domod/domod3.html).

A more complex example of a form:

```html
<script src="path/to/domod.js" charset="utf-8"></script>

<form id="form1">
    <div>
        <label>gender:</label>
        <input m-onclick="$form.gender = 'male'" 
               type="radio" name="gender" value="male" m-checked="$form.gender === 'male'">Male
        <input m-onclick="$form.gender = 'female'" 
               type="radio" name="gender" value="female" m-checked="$form.gender === 'female'">Female
    </div>
    <div>
        <label>mobile:</label>
        <input type="text" name="mobile" m-value="$form.mobile">
        <span m-style="{ display: !!$form.mobile ? 'inline' : 'none' }">
            You input: {{$parse($form.mobile)}}.
        </span>
        <span m-class="['some-class', { red: !$mobileInputStatus }]" 
              m-style="{ display: !$mobileInputStatus ? 'inline' : 'none' }">
            {{$form.mobile}} is {{$mobileInputStatus}}!
        </span>
    </div>
    <div>
        <label>age:</label>
        <select name="age" m-value="$form.age.value">
            <option m-each="$val in $form.age.options" m-value="$val">{{$val}}</option>
        </select>
    </div>
    <div>
        <label>city:</label>
        <select name="city" m-value="$form.city.value">
            <option m-each="($val, $key) in $form.city.options" m-value="$key">
                {{$val.code}}.{{$val.name}}
            </option>
        </select>
    </div>
</form>

/* 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);
</script>
```

## 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:

## 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)

domod

domod 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

domod

domod 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README