varvet / serenade.js

Client side MVC framework
http://serenadejs.org
Other
524 stars 27 forks source link

How does rendering work? #109

Open trusktr opened 8 years ago

trusktr commented 8 years ago

Does it strategically keep DOM elements alive and update only ones that have changed (for example, similar to React or Aurelia, both of which use completely different techniques)?

Burgestrand commented 8 years ago

Serenade keeps a reference to the DOM elements, and updates the elements by using the DOM API, e.g. setting element.innerHTML, element.value, element.style and so on. It's slightly tricky to see since everything's dynamic from the AST, but you can see it fairly clearly on the edge-cases such as checkboxes:

https://github.com/elabs/serenade.js/blob/master/src/compile.coffee#L50

    bindToProperty node, model, ast.value, (_, value) ->
      if element.type is "checkbox"
        element.checked = !!value
      else if element.type is "radio"
        element.checked = true if value is element.getAttribute("value")
      else
        value = "" if value == undefined
        assignUnlessEqual(element, "value", value)