When views are attached to dom, trigger 'attach' events

Added this mechanism by augmenting jQuery dom mutation methods. It will
only trigger an event if the element has a truthy value for the
'triggerAttach' data entry. This will allow us to execute actions that
require the view to be physically on the dom at the appropriate time.
This commit is contained in:
Nathan Sobo 2012-01-16 21:15:57 -08:00
parent f4aa8daa52
commit 5dbdd92e6c
2 changed files with 49 additions and 0 deletions

View File

@ -1,3 +1,4 @@
$ = require 'jquery'
Template = require 'template'
describe "Template", ->
@ -89,3 +90,31 @@ describe "Template", ->
expect(view.subview.view()).toBe view.subview
expect(view.subview.header.view()).toBe view.subview
describe "when a view is inserted within another element with jquery", ->
attachHandler = null
beforeEach ->
attachHandler = jasmine.createSpy 'attachHandler'
view.on 'attach', attachHandler
describe "when attached to an element that is on the DOM", ->
it "triggers the 'attach' event on the view", ->
content = $('#jasmine-content')
content.append view
expect(attachHandler).toHaveBeenCalled()
view.detach()
content.empty()
attachHandler.reset()
otherElt = $('<div>')
content.append(otherElt)
view.insertBefore(otherElt)
expect(attachHandler).toHaveBeenCalled()
describe "when attached to an element that is not on the DOM", ->
it "does not trigger an attach event", ->
fragment = $('<div>')
fragment.append view
expect(attachHandler).not.toHaveBeenCalled()

View File

@ -27,6 +27,7 @@ class Template
@bindEvents(view)
if @viewProperties
$.extend(view, @viewProperties)
view.data('triggerAttach', true)
view.initialize?(attributes)
view
@ -51,3 +52,22 @@ class Template
$.fn.view = ->
this.data('view')
# Trigger attach event when views are added to the DOM
checkIfAttached = (elt) ->
if elt.data?('triggerAttach') and elt.parents('html').length
elt.trigger('attach')
_.each ['append', 'prepend', 'after', 'before'], (methodName) ->
originalMethod = $.fn[methodName]
$.fn[methodName] = (args...) ->
result = originalMethod.apply(this, args)
checkIfAttached(args[0])
result
_.each ['prependTo', 'appendTo', 'insertAfter', 'insertBefore'], (methodName) ->
originalMethod = $.fn[methodName]
$.fn[methodName] = (args...) ->
result = originalMethod.apply(this, args)
checkIfAttached(this)
result