Skip to content

Instantly share code, notes, and snippets.

@zzen
Forked from steida/gist:2175552
Created March 23, 2012 22:15
Show Gist options
  • Save zzen/2175585 to your computer and use it in GitHub Desktop.
Save zzen/2175585 to your computer and use it in GitHub Desktop.
###*
@fileoverview Songs view refactored.
Why such refactoring?
To separate logic and wiring.
Then we can test things with logic without wiring mess.
###
goog.provide 'app.songs.View'
goog.require 'goog.ui.Component'
goog.require 'este.mobile.FastButton'
###*
@param {app.Songs} songs
@param {Function} fastButtonFactory
@param {Function} indexFactory
@constructor
@extends {goog.ui.Component}
###
app.songs.View = (@songs, @fastButtonFactory) ->
goog.inherits app.songs.View, goog.ui.Component
goog.scope ->
`var _ = app.songs.View`
###*
@param {app.Songs} songs
###
_.create = (songs) ->
@fastButtonFactory = (el) ->
new este.mobile.FastButton el
@indexFactory = (el, className) ->
song = goog.dom.getAncestorByClass el, 'sg-song'
return -1 if !song
song.getAttribute 'data-index'
new _ songs, fastButtonFactory, indexFactory
###*
@type {app.Songs}
@protected
###
_::songs
###*
@type {Function}
###
_::fastButtonFactory
###*
@override
###
_::decorateInternal = (element) ->
goog.base @, 'decorateInternal', element
@renderSongs()
return
_::enterDocument = ->
goog.base @, 'enterDocument'
# instead of
# @fastButton = new este.mobile.FastButton @getElement()
# factory is used
@fastButton = @fastButtonFactory @getElement()
@getHandler().
listen(@fastButton, 'click', @onFastButtonClick)
return
_::renderSongs = ->
html = [
'<div class="sg-new"></div>'
'<div class="sg-search"></div>'
'<div class="sg-current-list">to learn hot songs</div>'
]
for song, i in @songs
html.push "
<div data-index='#{i}' class='sg-song'>
<span class='sg-name'>#{song.name}</span>
<span class='sg-author'>#{song.author}</span>
</div>"
@getElement().innerHTML = html.join ''
_::exitDocument = ->
goog.base @, 'exitDocument'
@fastButton.dispose()
return
_::onFastButtonClick = (e) ->
# instead of
# songEl = @dom_.getAncestorByClass e.target, 'sg-song'
# return if !songEl
# index = songEl.getAttribute 'data-index'
# factory is used
index = @indexFactory e.target, 'sg-song'
return if index == -1
song = @songs[index]
@dispatchEvent
type: 'songclick'
song: song
return
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment