Bootstrap Modal for EmberJS

app.js

App = Ember.Application.create();

App.BootstrapModalView = Ember.View.extend({
    classNames: ['modal', 'fade'],
    layout: Ember.Handlebars.compile('<div class="modal-dialog"><div class="modal-content">{{yield}}</div></div>'),
    didInsertElement: function () {
        this._super();
        Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },
    afterRenderEvent: function () {
        var self = this;
        this.$().on('hidden.bs.modal', function (e) {
            self.get('controller').send("afterDismiss");
        }).modal('show');
    },
    willDestroyElement: function () {
        this.$().off().removeClass('fade').modal('hide').data('bs.modal', null);
    },
    actions: {
        dismiss: function () {
            this.$().modal('hide');
        }
    }
});

App.Router.map(function () {
    this.resource('users', function () {
        this.resource('addUser', { path: '/add' });
    });
});

App.AddUserView = App.BootstrapModalView.extend();

App.AddUserController = Ember.Controller.extend({
    afterDismiss: function () {
        this.transitionToRoute('users');
    }
});

index.html

<script type="text/x-handlebars" id="users">
    {{#link-to 'addUser'}}Add User{{/link-to}}
    {{outlet}}
</script>


<script type="text/x-handlebars" id="addUser">
    <div class="modal-header">
        <h3 class="modal-title">Add User</h3>
    </div>
    <div class="modal-body">
        <!-- Standard Bootstrap/Ember stuff. -->
    </div>
    <div class="modal-footer">
        <button class="btn btn-link" {{action 'dismiss' target='view'}}>Cancel</button>
        <button class="btn btn-primary">Create</button>
    </div>
</script>

what is this