the web framework to provide dom component
JavaScript CoffeeScript Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bower_components
demo
dist
doc
lib
scripts
src
static
test
.bowerrc
.gitattributes
.gitignore
LICENSE
README.md
bower.json
gulpfile.coffee
history.md
package.json
todo.md

README.md

Domcom

the web framework to provide dom component

document

See doc/ for the document. Both English and Chinese document are provided.

中文文档: 请看 doc/Chinese/ 文件夹。

download and install

npm install --save domcom

or use the cdn provided by jsdelivr.net (replace "x.y.z" with the real version number):

`<script src="http://cdn.jsdelivr.net/domcom/x.y.z/domcom.min.js"/>`

Features

  • declarative composable components with reactive function

  • only render the invalidated components and refresh the really changed dom nodes with better automatic update status checking

  • decouple with model and controller completely

  • simple but powerful route

  • convenient support for promise

  • never pollute the dom because of the framework itself

  • good browser compatiblity, even with IE 6, 7, 8

  • no dependencies, no polyfill, no immutable data, no companion libraries is necessary

  • no necessary to use any template language

Samples

There is some samples, and a todoMVC implementation.

The code below give a taste of domcom:

In javascript:

// Although it's not necessary, 
// but I recommend to use some tool like babel to support ES6, especially destructive syntax

const {list, text, p, flow, see} = dc

// otherwise you need write the the code like below, it's not an ideal method:
// var demoSum, flow, list, p, see, text;​
// list = dc.list, text = dc.text, p = dc.p, flow = dc.flow, see = dc.see;
​
demoSum = function() {
  var a, b, comp, p1, t1, t2;

  a$ = see(1);
  b$ = see(2);

  comp = list((t1 = text({
    value: a$,
    onchange(event, node) { return a$(node.value * 1); } // ES 6

    // onchange: function(event, node) { return a$(node.value * 1) } // ES5

  })), (t2 = text({
    value: b$,
    onchange(event, node) { return b$(node.value * 1); } // ES 6

    // onchange: function(event, node) { return b$(node.value * 1);}  // ES5

  })), p1 = p(flow.add(a$, b$)));

  p1.renderWhen([t1, t2], 'change');

  return comp.mount();
};
​
demoSum();

​ In coffee-script(recommended):

{list, text, p, flow, see} = dc

demoSum = ->

    a$ = see 1; b$ = see 2

    comp = list \
        (t1 = text value: a$, onchange: (event, node) -> a$ node.value*1),
        (t2 = text value: b$, onchange: (event, node) -> b$ node.value*1),
        p1 = p flow.add a$, b$

    p1.renderWhen [t1, t2], 'change'

    comp.mount()

demoSum()

LICENSE

MIT, see LICENSE