https://github.com/hackwaly/hoof
A Javascript MVVM library. Like efficient virtual-dom version of knockout.
https://github.com/hackwaly/hoof
Last synced: 11 months ago
JSON representation
A Javascript MVVM library. Like efficient virtual-dom version of knockout.
- Host: GitHub
- URL: https://github.com/hackwaly/hoof
- Owner: hackwaly
- Created: 2015-12-25T07:39:16.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-14T10:32:39.000Z (over 10 years ago)
- Last Synced: 2025-03-22T03:02:54.303Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 87.9 KB
- Stars: 12
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hoof
A Javascript MVVM library. Like efficient virtual-dom version of knockout.
[Live Hoof+D3 Demo](http://bl.ocks.org/hackwaly/raw/2b6692effcb4fa3def95/)
_Technique preview. Opensourced here to share the ideas in it._
#### Difference with React
* Render once, update by data binding.
* Not diff virtual-dom(s), diff data on necessary.
* No wrapper span element for text binding. It won't break your css.
* Support render fragments.
#### Example
```javascript
import {stored} from 'property';
import {Fragment, React, render} from 'hoof';
let counter = stored(0);
let step = stored(1, (n) => +n); // The second argument is a write filter.
function increment() {
counter(counter() + step());
}
let ctx = render(
{counter}
increment
);
// `value={step()}` instead of `value={step}` means do not make write binding.
// `value$input$change={step}` is a read binding says read `value` into `step` on `input` or `change` event.
// Insert rendered (fragment) node to document.
document.body.appendChild(ctx.node);
// Setup all bindings.
ctx.setup();
```