Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Backbone Chrome Extension
($, _, Backbone, MustacheWrapper, InitTemplate, HeaderView, FooterView, ZapsView, AccountView) ->
Viewport = Backbone.View.extend
Top level view which controls entire viewport
'click li[data-tab]': 'tabClick'
'click *[data-navlink]': 'navClick'
initialize: (options) ->
render: (appView, options) ->
# If an appView was passed, render it into the app frame
if appView?
# unload previous view if it specified an unload function
if @appView?.unload?
# unbind all events attached to old view
if @appView?.undelegateEvents?
defaults =
el: @$('*[data-app]')
account: @account
headerView: @headerView
footerView: @footerView
@appView = new appView($.extend(defaults, options))
# else render the normal viewport view
view =
place: 'holder'
@$el.html(Mustache.to_html(InitTemplate, view))
@headerView = new HeaderView
el: @$('div[data-header=true]')
account: @account
@footerView = new FooterView
el: @$('div[data-footer=true]')
account: @account
navigate: (path) ->
# Navigate to the path inside a new browser tab
tabClick: (e) ->
# Called when a tab is clicked, handle navigation
tab = $(e.currentTarget).attr('data-tab')
load = (tab, view, options) =>
@render(view, options)
switch tab
when "zaps" then load(tab, ZapsView, {})
when "account" then load(tab, AccountView, {})
return false # cancel click
navClick: (e) ->
# Link clicked to open an external link
path = $(e.currentTarget).attr('data-navlink')
return false # cancel click
return Viewport
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.