Backbone.js use bootstrap modal

by erick

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone.js"></script>
<html>
<body>
    <a href="#" id="show-modal">Show Modal</a>
    
    <script id="modal-template" type="text/template">
        <div class="modal">
            <div class="modal-header"><h3><%= title %></h3></div>
            <div class="modal-body"><%= body %></div>
            <div class="modal-footer"><a class="btn close">Close</a></div>
        </div>
        <div class="modal-backdrop"></div>
    </script>
</body>

JavaScript

$(function() {

    var ModalView = Backbone.View.extend({

        events: {
            'click .close': 'close'
        },

        initialize: function() {
            this.template = _.template($('#modal-template').html());
        },

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },

        show: function() {
            $(document.body).append(this.render().el);                
        },

        close: function() {
            this.remove();
        }
           
    });

    var model = new Backbone.Model({ title: 'Example Modal', body: 'Hello World' });

    $('#show-modal').click(function() {
        var view = new ModalView({ model: model });
        view.show();
    });

});