JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/loginx/batman/master/lib/dist/batman.jquery.min.js"></script>
<div data-yield="main"></div>

<div id="app-container">
    <span data-bind="box.name"></span>
    <div data-foreach-part="box.parts">
        <span data-bind="part.number"></span>
        <a data-event-click="controllers.parts.destroy | withArguments part">Remove</a>
    </div>
</div>

CoffeeScript

class window.myApp extends Batman.App

class myApp.Box extends Batman.Model
    @hasMany 'parts'
    @encode "name"

class myApp.Part extends Batman.Model
    @belongsTo 'box'
    @encode "number"
    
class myApp.BoxesController extends Batman.Controller
    show: (params) ->
        box = new myApp.Box(name: "fancy box")
        box.get('parts').add( new myApp.Part(number: 1) )
        box.get('parts').add( new myApp.Part(number: 2) )
        @set('box', box)
        @render
          into: 'main'
          html: $("#app-container").html()
            
        
        
class myApp.PartsController extends Batman.Controller
    destroy: ->
      console?.log "Hey I'm here"
    
myApp.run()
myApp.get("controllers.boxes").show(1)