backbone.elements
v0.0.2
Published
add custom select symbol for backbone selector
Downloads
6
Readme
Backbone.elements
Add shortcut for Backbone.View selector
Install
<script src="../lib/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../lib/underscore-min.js" type="text/javascript"></script>
<script src="../lib/backbone-min.js" type="text/javascript"></script>
<script src="../lib/backbone.elements.js" type="text/javascript"></script>
Usage
Add a shortcut
class View extends Backbone.View
elements:
".elem-selector": "elem"
Use shortcut
class View extends Backbone.View
elements:
".elem-selector": "elem"
"$elem .child-elem"
# use shortcut in event bind
events:
"click $elem": "_clickHandler"
"mouseover $elem": "_hoverHandler"
"dblclick $elem": "_dblclickHandler"
# get element jquery object
_clickHandler: ->
@$elem().text "clicked"
_dblclickHandler: ->
@$elem().replaceWith $ "<div>", class: "loading elem-selector"
# refresh elem cache
@$elem(true).removeClass "loading"
# select child element
_hoverHandler: ->
# use as `this.$`
@$elem(".sub-elem").addClass "hover"
# same as `@$elem().find(".sub-elem")`
# use in `this.$`, **not recommend**, becase the
# `$elem` shortcut cann't use the element cache
@$("$elem .another-elem").removeClass "hover"
# same as `@$(".elem-selector .another-elem")
Refresh Element Cache
class View extends Backbone.View
elements:
".elem-selector": "elem"
rerender: ->
@render()
@refreshCache()
Parse Shortcut
class View extends Backbone.View
elements:
".elem-selector": "elem"
events:
"click $elem": "_clickHandler"
_clickHandler: (event) ->
$(document).on "hover", @parseSelectorSymbol("$elem .hotpoint"), (event) =>
alert "hover"
Dispose Element Cache
It will dispose element cache autonomicly when Backbone.View call remove
method.
class View extends Backbone.View
elements:
".elem-selector": "elem"
events:
"click $elem": "_clickHandler"
_clickHandler: (event) ->
@clearElements()