JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
  <body>
    
<script type="text/mustache" id="example">
  {{#next_level}}
    Text here: "<span {{ (el) -> el.data("foo", "bar") }}>{{text}}</span>"
  {{/next_level}}
</script>
  
  </body>

JavaScript

$(function() {

var obj = new can.Observe({
    next_level : [ {text : "foo" }, { text : "foo" } ]
});
    
    
can.view("#example", obj,  function(frag) {
    $(document.body).append("1. Live binding fails<br>").append(frag);
    $("span").text("bar");
    obj.next_level.push({ text : "foo" })
/*    $(document.body).append("<br>Should be: \"" + obj.attr("next_level.text") + "\"");
    
    $(document.body).append("<br><br>2. After deferred resolves and attr changes, mustaches render incorrectly<br>");
    can.view("#example", obj, function(frag) {
    $(document.body).append(frag);
    } );
    */
}) 

});