https://github.com/azer/render-loop

Async DOM render loop with Virtual DOM diffing
https://github.com/azer/render-loop

Last synced: 11 months ago
JSON representation

Async DOM render loop with Virtual DOM diffing

• Host: GitHub
• URL: https://github.com/azer/render-loop
• Owner: azer
• Created: 2014-12-01T08:52:51.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-05-21T20:56:54.000Z (about 11 years ago)
• Last Synced: 2025-05-28T09:34:11.647Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 242 KB
• Stars: 16
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## render-loop

Build HTML/DOM layouts that gets patched automatically with [Virtual DOM](http://npmjs.org/virtual-dom)

## Install

```bash

$ npm install render-loop

```

## Usage

A simple greeting layout:

```js

var RenderLoop = require('render-loop')

var loop = RenderLoop('
{message}, {name}
', function () {

  loop.set({

    message: 'good morning',

    name: 'azer'

  })

})


loop.html()

// => 
good morning, azer


loop.insert(document.body)

loop.set('message', 'good afternoon')

document.body.innerHTML

// => 
good afternoon, azer

```


A list layout:

```js

var prices = [

  { name: 'melon', price: '$3.99/lb' },

  { name: 'orange', price: '$2.49/lb' }

]

var html = {

  fruits: '
{fruits}
',

  fruit: '
{name}: {price}
'

}


var loop = RenderLoop(html.fruits, function () {

  loop.set('fruits', loop.each(html.fruit, prices));

})

```