Ember Latest

The latest build of Ember.

by fangyang

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Boostrap modal sample</h1>    
    <a {{action showModal}} href="#">Open modal</a>
</script>

<script type="text/x-handlebars" data-template-name="modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>{{view.title}}</h3>
    </div>
    <div class="modal-body">
        <p>{{view.content}}</p>
    </div>
    <div class="modal-footer">
        <a {{action close target="view"}} href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
    events: {
        showModal: function() {
            App.ModalView.create({ title: "My title", content: "My content" }).append();
        }
    }
});

App.ModalView = Ember.View.extend({
    templateName: "modal",
    title: "",
    content: "",
    classNames: ["modal", "fade", "hide"],
    didInsertElement: function() {
        this.$().modal("show");
        this.$().one("hidden", this._viewDidHide);
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        if (!this.isDestroyed) {
            this.destroy();
        }
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});