Skip to content
This repository has been archived by the owner on Jan 12, 2018. It is now read-only.

How does rendering work? #109

Open
trusktr opened this issue Aug 2, 2016 · 1 comment
Open

How does rendering work? #109

trusktr opened this issue Aug 2, 2016 · 1 comment

Comments

@trusktr
Copy link

trusktr commented Aug 2, 2016

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
Copy link
Member

Burgestrand commented Aug 3, 2016

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)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants