JSFiddle - React, Tailwind, and code Playground

by abernier

HTML

<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.js"></script>
<script src="https://raw.github.com/maccman/spine/v1.0.5/lib/spine.js"></script>
<script src="https://raw.github.com/maccman/spine/v1.0.5/lib/tmpl.js"></script>
<script src="https://raw.github.com/maccman/spine/v1.0.5/lib/list.js"></script>
<ul id="foo">
    <li>A</li>
    <li>B</li>
</ul>
<ul id="bar">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

CoffeeScript

class Cycling extends Spine.Controller
  spec: {
    items: '> *'
  }
  constructor: (spec = {}) ->
    @spec = $.extend(Object.create(@spec), spec)
    
    @items = @items(@spec.items)

    @
  
  items: (sel = @spec.items) ->
    @$(sel)
    

test1 = new Cycling(el: $('#foo'), items: 'li')
test2 = new Cycling(el: $('#bar'))

    
console.log test1
console.log test2