Skip to content

Instantly share code, notes, and snippets.

@francescoagati
Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save francescoagati/697b7c19baef76a7e255 to your computer and use it in GitHub Desktop.
Save francescoagati/697b7c19baef76a7e255 to your computer and use it in GitHub Desktop.
subtreee element re-rendering with mercury
<div id="list"></div>
h = mercury.h
diff = mercury.diff
patch = mercury.patch
createElement = mercury.create
items = for n in [0 to 2000]
id:n,title:"item #{n}",counter:0
list = document.get-element-by-id \list
render-item = (item) ->
h 'li', id:item.id,"#{item.title} - #{item.counter}"
render = ->
h '.list' do
h 'ul' do
for item in items
render-item item
tree = render!
rootNode = createElement tree
list.appendChild rootNode
cycle = ->
index = parse-int(Math.random! * 10)
element = document.get-element-by-id index
item = items[index]
old-tree = render-item item
item.counter++
new-tree = render-item item
patches = diff old-tree,new-tree
patch element,patches
setInterval cycle,50
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
background-color: white;
overflow:hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: 0;
}
ul li {
background-color: #f0f0f0;
margin-bottom: 1px;
padding-top: 7px;
padding-left: 20px;
height: 30px;
}
#list {
width: 300px;
height: 400px;
overflow-y: scroll; /* has to be scroll, not auto */
//-webkit-overflow-scrolling: touch;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment