Actions in views

The latest build of Ember.

by Jeremy Gillick

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="index">
    <h1>Hello</h1>
    <p>
        <button {{action "openDialog"}}>Delete</button>
    </p>
</script>

<script type="text/x-handlebars" data-template-name="dialog">
    <h2>Delete the things</h2>
    <p>
        <button {{action "removeEntry" target="view"}} class="primary-btn">Yes</button>
        <button {{action "closeDeleteConfirmation" target="view"}} class="cancel-btn">Cancel</button>
    </p>
</script>

CSS

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

JavaScript

App1 = Ember.Application.create({});
App1.IndexRoute = Ember.Route.extend({

});
App1.IndexController = Em.ObjectController.extend({
    actions: {
        openDialog: function(){
            App2.DialogView.create().append();
        }
    }
});
App1.IndexView = Em.View.extend({
    templateName: 'index'
});

App2 = Ember.Application.create({
    rootElement: document.createElement('div')
});
App2.DialogView = Em.View.extend({
    templateName: 'dialog',
    
    didInsertElement: function(){
        
        //
        // Since the actions events aren't working 
        // by themselves for some reason
        //
        /*$('.primary-btn').click($.proxy(function(event){
          this.send('removeEntry');
        }, this));
        $('.cancel-btn').click($.proxy(function(event){
          this.send('closeDeleteConfirmation');
        }, this));*/
    },
    
    actions: {
        removeEntry: function(){
            console.log('Delete!!!');
            this.remove();
        },
        closeDeleteConfirmation: function(){
            alert('Cancel!!!');
            this.remove();
        }
    }
});