Skip to content

Instantly share code, notes, and snippets.

@watert
Created January 23, 2015 13:19
Show Gist options
  • Save watert/207dd6eca7006d2d5c0e to your computer and use it in GitHub Desktop.
Save watert/207dd6eca7006d2d5c0e to your computer and use it in GitHub Desktop.
a common backbone view class for bootstrap modal
###
a common backbone view class for bootstrap modal
# install:
just import backbone,jquery,bootstrap and this script then use it
# usage:
modal = new BootstrapModalView
title: String, body: HTMLString|DOM, footer: HTMLString|DOM,
events: BackboneViewEvents
modal.show()
###
class BootstrapModalView extends Backbone.View
tagName:"div"
className:"modal fade"
initialize:(options)->
@options = _.defaults options,
footer: """
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
"""
# @render()
@$el.html(@html).appendTo($("body"))
@$(".modal-title").text(options.title)
body = options.view?.$el or options.body
# if _.isFunction(body) then body = body(options)
@$(".modal-body").append(body)
@$(".modal-footer").append(options.footer)
show:(options)->
@$el.modal("show",options)
hide:(options)->
@$el.modal("hide",options)
# render:()->
html: """
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
&times;
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
"""
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment