Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bolasblack/backbone.elements
Add shortcut for Backbone.View selector
https://github.com/bolasblack/backbone.elements
Last synced: 2 months ago
JSON representation
Add shortcut for Backbone.View selector
- Host: GitHub
- URL: https://github.com/bolasblack/backbone.elements
- Owner: bolasblack
- Created: 2012-10-28T15:30:29.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2013-03-01T11:37:31.000Z (almost 12 years ago)
- Last Synced: 2024-09-14T03:30:12.972Z (4 months ago)
- Language: JavaScript
- Homepage: http://bolasblack.github.com/backbone.elements/
- Size: 256 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Backbone.elements
**Add shortcut for Backbone.View selector**
## Install
```html
```
## Usage
### Add a shortcut
```coffeescript
class View extends Backbone.View
elements:
".elem-selector": "elem"
```
### Use shortcut
```coffeescript
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 $ "
", 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
```coffeescript
class View extends Backbone.View
elements:
".elem-selector": "elem"
rerender: ->
@render()
@refreshCache()
```
### Parse Shortcut
```coffeescript
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.
```coffeescript
class View extends Backbone.View
elements:
".elem-selector": "elem"
events:
"click $elem": "_clickHandler"
_clickHandler: (event) ->
@clearElements()
```