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: "<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. Pushing redraws whole list<br>Actual: ").append(frag);
    $("span").text("bar");
    obj.next_level.push({ text : "foo" })
    $(document.body).append("<br>Expected: Text: \"bar\" Text: \"bar\" Text: \"foo\"").append(frag);
/*    $(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);
    } );
    */
}) 

});