simple reactive view framework inspired by knockout, angular and backbone

Module License: MIT

Added by: Sam Deering





Stars: 49

Watchers: 49

Forks: 3

Module Description


Fast and simple reactive view framework. inspired by angular, backbone and knockout.


  • angular like directive
  • knockout like data-bind
  • backbone like view API (coffee-script friendly)
  • simple list view implementation
  • less code, more powerful


  • jQuery


User bower

$ bower install horn


# Define custom directive
Horn.addDirective "data-click-with-trigger", (view) ->
  $el = view.$("[data-click-with-trigger]")
  $el.on 'click', (e) =>
    eventName = $(e.target).data('click-with-trigger')
    view.trigger eventName

# Register as raw string. This root need to have data-temaplate-name.
# Write your templates as your way.
Horn.registerTemplate """
    data-attrs="name, money, showAddMoney">

    <span data-text="name">NO NAME</span>
    <span data-text="money">0</span>
    <button data-click-with-trigger="update">update</button>
    <button data-click="toggleShowAddMoney">toggle show add money</button>
    <button data-visible="showAddMoney" data-click="addMoney">addMoney</button>

# It extends Horn.View and binds template by templateName
class Status extends Horn.View
  templateName: 'my-status'
  addMoney: ->
    @money += 10 # data-attrs generate getters.
    # data-text='money' change view soon.

  toggleShowAddMoney: ->
    @showAddMoney = [email protected]

# ListView has itemView
class StatusList extends Horn.ListView
  itemView: Status

$ ->
  # View
  status = new Status
  status.name = 'foo'
  status.money = 0

  # attach
  status.attach 'body'
  status.on 'update', -> console.log 'updated' # fired by custom directive

  # ListView
  list = new StatusList
  list.size(2) # generate automatically 2 blank view.
  list.update [{name: 1},{name: 2},{name: 3}] # generate automatically 3 view and apply params.
  list.addItem {name: 4} # add more
  list.attach 'body'

See detail at examples.



  • Horn.registerTemplate(templateString)
  • Horn.addDirective(name, fn)
  • Horn.addDirectiveByEachElement(name, fn)
  • Horn.addDirectiveByEachValue(name, fn)

Default directives

  • data-text
  • data-click
  • data-visible

Create your own custom directive via Horn.addDirective family For example, data-click is defined like this.

Horn.addDirectiveByEachElement "data-click", (view, $el, val) ->
  $el.on 'click', (view[val].bind view)


Backbone.View like API This has clone of Backbone.Events API

  • View#$(selector)
  • View#_$(selector) # cache result
  • View#on
  • View#off
  • View#trigger
  • View#attach(selector)
  • View#detach()
  • View#show()
  • View#hide()
  • View#remove()


ListView has all Horn.View API

  • ListView#size()
  • ListView#size(num)
  • ListView#addItem(item)
  • ListView#get(num)
  • ListView#toJSON()
  • ListView#update(items)

Generate views as its size.


I used chaplin.js and Backbone.stickit for data bindings. In this style, I had to write many code even if I created simple view. I need simple extendable template with js mappings as less-code as I can. I don't need ajax wrapper nor mapping because REST API is enough for me to make application.


  • Router and View instance mapping
  • Document
  • Test
  • AMD style
  • Benchmark

Module stats last updated: 2017-12-11 15:00:01

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!