Skip to content

Instantly share code, notes, and snippets.

@watert
Last active August 29, 2015 14:08
Show Gist options
  • Save watert/2cd3f2b8f420e04a5e8d to your computer and use it in GitHub Desktop.
Save watert/2cd3f2b8f420e04a5e8d to your computer and use it in GitHub Desktop.
jQuery based simple directives by coffeescript
// based on requirejs and backbone style views currently
$.fn.directive = (method,options)->
$dom = $(this)
if not method #init
viewName = $dom.attr("directive")
if viewName then require ["directive/#{viewName}"], (View)->
view = new View(el:$dom[0])
isRender = $dom.attr("render")
if isRender=="" or isRender
view.render()
$dom.data("directive",view)
.trigger("directive-ready",view)
$dom.directive("compile") # always compile sub directives
return $dom
else switch method
when "ready"
view = $dom.data("directive")
if view then options(view)
else $dom.one "directive-ready", (view)-> options(view)
console.log "ready method"
when "compile"
$dom.trigger("beforeCompile")
$subDoms = $dom.find("[directive]")
$subDoms.each ->
$(this).directive()
assert = chai.assert
describe "$.Directive", ->
it "should compile and ready method works", (done)->
$dom = $(""" <div render directive="navbar"></div> """)
$dom.directive().directive "ready",->
assert.ok($dom.data("directive"))
done()
it "should compile sub directives", (done)->
$dom = $("""<div>
<div directive="navbar"></div>
</div>""")
$dom.directive()
$dom.find("[directive=navbar]").directive "ready", (view)-> done()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment