website/example.html

<p>With Simulacra.js, any changes on bound objects reflect immediately in the DOM, no manual intervention required. Here is an example of Simulacra.js in action:</p>
<div class="example">
  <div class="container">
    <div class="left">
      <div class="product-container">
      </div>
    </div>
    <div class="right">
      <p>Live demo, try it out:</p>
      <ul>
        <li><code>state.name = "Caramel Latte"</code></li>
        <li><code>state.details.size.push("Trenta")</code></li>
        <li><code>state.details.size = ["S", "M", "L"]</code></li>
      </ul>
      <input type="text" name="eval" placeholder="Change state...">
    </div>
  </div>
</div>
<template id="product">
  <h1 class="name"></h1>
  <div class="details">
    <div><span class="size"></span></div>
    <hr><h4 class="vendor"></h4>
  </div>
</template>
<script>
void function (root) {
  var simulacra = root.simulacra
  simulacra.useCommentNode = true

  var date = new Date()

  var state = root.state = {
    name: 'Pumpkin Spice Latte',
    details: {
      meta: {
        date: date
      },
      size: [ 'Tall', 'Grande', 'Venti' ],
      vendor: 'Coffee Co.'
    }
  }

  // Copypaste from above.
  var rehydratedState = root.rehydratedState = {
    name: 'Pumpkin Spice Latte',
    details: {
      meta: {
        date: date
      },
      size: [ 'Tall', 'Grande', 'Venti' ],
      vendor: 'Coffee Co.'
    }
  }

  var template = document.querySelector('#product')
  var binding = [ template, {
    name: '.name',
    details: [ '.details', {
      meta: {
        date: function (node, value) {
          node.dataset.timestamp = value.getTime()
        }
      },
      size: '.size',
      vendor: '.vendor'
    } ]
  } ]

  var container = document.querySelector('.product-container')
  var element = simulacra(state, binding)
  container.appendChild(element)

  // Demo rehydrated state.
  simulacra(rehydratedState, binding, container)

  var input = document.querySelector('input[name="eval"]')
  input.addEventListener('keyup', function (event) {
    if (event.keyCode === 13) {
      var x = input.value
      try {
        eval(x)
        input.value = ''
      }
      catch (error) { alert(error) }
    }
  })
}(this)
</script>