JSFiddle - React, Tailwind, and code Playground

by prometh

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.com/release/latest/can.stache.js"></script>
<script id="dummyMustache" type="text/mustache">
    {{#if works.length}}
        <ul>
            {{#each works}}
                <li>{{.}}</li>
            {{/each}}
        </ul>
    {{/if}}
    {{#if breaks.length}}
        <ul>
            {{#each breaks}}
                <li>{{.}}</li>
            {{/each}}
        </ul>
    {{/if}}
    <p>Clicking the "add (breaks)" button will render 3 list items, when it should render only 2.</p>
    <button can-click="add1">add (works)</button>
    <button can-click="add2">add (breaks)</button>
    <button can-click="reset">reset</button>
</script>

JavaScript

can.Component.extend({
    tag: "test",
    template: can.view("#dummyMustache"),
    scope: {
        breaks: [],
        works: [],
        
        add1: function() {
            this.works.splice(0);    // reset
            for (var i=1; i<=2; i++) {
                this.works.push("works - "+i);
            }
        },
        
        add2: function() {
            can.batch.start();
            this.breaks.splice(0);    // reset
            for (var i=1; i<=2; i++) {
                this.breaks.push("breaks - "+i);
            }
            can.batch.stop();
        },
        
        reset: function() {
            can.batch.start();
            this.works.splice(0);
            this.breaks.splice(0);
            can.batch.stop();
        }
    }
});

$("body").append( can.stache("<test/>")() );
$("body").append( can.mustache("<hr/><test/>")() );