skel.js usage preview

application.coffee

class Item extends Backbone.Model
  initialize: ->
    @variants = new Backbone.Collection(@get('variants'))


class Items extends Backbone.Collection
  url: '/api/items'
  model: Item
  parse: (response) -> response.objects


class FilterView extends Skel.View
  events:
    'keypress .field': 'filter'

  filter: (event) =>
    return unless event.which == 13
    event.preventDefault()
    @collection.fetch(reset: true, data: {title: @$('.field').val()})


jQuery ->
  view = new Skel.View
    el: $('#application')
    template: t('application')
    filter: FilterView
    collection: new Items
  view.render()

application.hbs

<div class="proposals">
  {{#view opts.filter collection=view.collection className="filter"}}
    <input type="search" class="field">
  {{/view}}

  {{#collection view.collection tagName="ul" className="items"}}
    {{#models tagName="li" className="item" static=true}}
      {{attrs.title}}

      {{#collection model.variants tagName="ul" className="variants"}}
        {{#models tagName="li" className="variant" static=true}}
          {{attrs.title}}
        {{/models}}
      {{/collection}}
    {{/models}}
  {{/collection}}
</div>