Handlebars li-to helper that let's you wrap a link in a parent element that gets the class name bindings (active, loading etc.) Useful for twitter-bootstrap + ember.js

examples.emblem

ul.nav.navbar-nav
  = liTo 'index'   | Home
  = liTo 'about    | Index
  = liTo 'contact' | Contact

footer
  = liTo 'privacy' tagName="p"
    | I'm a link wrapped in a p, and when you click on the p you get routed to my link!

li_to_helper.coffee

Ember.Handlebars.registerHelper 'li-to', (name) ->
  options = [].slice.call(arguments, -1)[0]
  params = [].slice.call(arguments, 0, -1)
  hash = options.hash

  hash.disabledBinding = hash.disabledWhen

  hash.parameters =
    context: this
    options: options
    params: params

  Ember.Handlebars.helpers.view.call this, LinkLiView, options

link_li_view.coffee

LinkLiView = module.exports = Ember.LinkView.extend
  tagName: 'li'

  # TODO: Use a binding here...
  layout: (->
    Ember.Handlebars.compile('<a href="'+@get('url')+'">{{yield}}</a>')
  ).property('url')

  url: (->
    router = @get('router')
    routeArgs = @get('routeArgs')

    if routeArgs
      router.generate.apply(router, routeArgs)
    else
      @get('loadingHref')
  ).property('routeArgs')