node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

backbone.elements

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()