Add shortcut for Backbone.View selector
JavaScript CoffeeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
src
test
.gitignore
Gruntfile.js
Makefile
README.md
package.json

README.md

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