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>
<script id="item" type="text/template">
<li class="item">${name}</li>
</script>

<ul></ul>

CSS

.active {background-color:infoBackground;}

CoffeeScript

$.fn.item = ->
  item = $(@)
  item = item.data("item") or item.tmplItem?().data
  item?.reload?()
  item            # PATCH!

$ ->
  mylist = new Spine.List
    el: $('ul')
    template: (items) ->
      $('#item').tmpl(items)
  
  mylist.render([
    {name: 'A'}
    {name: 'B'}
    {name: 'C'}
    {name: 'D'}
    {name: 'E'}
    {name: 'F'}
  ])