JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>

<script type='text/template' id='template'>
  <div class='attribute' data-a="{{#a}}{{.}}{{/a}}"></div> <!--shift is buggy here-->
  <div class='innerHTML'> {{#a}}{{.}}{{/a}}</div> <!--shift() works fine here-->
  
  <br/> Does the attribute equal the innerHTML : <span class='doesTheAttributeEqualTheInnerHTML'></span>
  <br/> Actual Attribute : <span class='actualAttributeValue'></span>
  <br/> Expected Attribute : <span class='expectedAttributeValue'></span>
</script>

<div id='container'></div>

JavaScript

data = { 
    a : [1,2,3]
  }
  
  ractive = new Ractive({
    el : document.querySelector('#container'),
    template : document.querySelector('#template').innerHTML,
    data : data
  })
   
  setTimeout(function() {
    
    data.a.shift() //here's the issue
    
    setTimeout(function () {
      ractive.find('.doesTheAttributeEqualTheInnerHTML').innerHTML = (ractive.find('.attribute').attributes.getNamedItem('data-a').value === ractive.find('.innerHTML').innerHTML);
      ractive.find('.actualAttributeValue').innerHTML = ractive.find('.attribute').attributes.getNamedItem('data-a').value
      ractive.find('.expectedAttributeValue').innerHTML = ractive.find('.innerHTML').innerHTML
    })
    
  },1000)