JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canjs.com/release/2.0.3/can.jquery.js"></script>
<script id="something" type="text/mustache">
    {{#each items}}
        <div data-transition-id="{{@transition.id}}">
            {{message}}
        </div>
    {{/each}}
</script>

JavaScript

can.Transition = new Object();



can.Transition.Map = can.Map.extend(
{
	init: function()
	{
		// Simulates can.construct.proxy with a mess of nested functions
		can.batch.start( (function(){var scope=this;return function(){scope._startBatch.apply(scope)}}).apply(this) );
		
		this.attr("@transition", {id:this._cid});
		
		can.batch.stop();
	},
	
	
	
	_startBatch: function()
	{
        var selector = "[data-transition-id='"+ this.attr("@transition.id") +"']";
        setTimeout(function(){
        console.log(selector);
        
		console.log( can.$(selector) );
        })
        
        
	}
});



can.Transition.List = can.List.extend(
{
	Map: can.Transition.Map
},{});



can.Component.extend(
{
	tag: "something",
	template: can.view("#something"),
	scope:
	{
		items: new can.Transition.List()
	},
	
	init: function()
	{
        this.scope.items.push( {message:"asdf"} );
	}
});



can.append( can.$("body"), can.view.mustache("<something/>"));