Ember 0.9.8.1 Template

by MikeAski

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars">
    {{view App.View}}
</script>

<script type="text/x-handlebars" data-template-name="app-view">
    <div class="sub-view" {{action sayClick}}>Here is a click sensitive DIV</div>
    <div class="sub-view" {{action sayEnter on="mouseEnter"}}>Here is an entering sensitive DIV</div>
    <div class="sub-view" {{action sayLeave on="mouseLeave"}}>Here is an leaving sensitive DIV</div>
</script>

CSS

.view, .sub-view {
    margin: 20px;
    padding: 20px;
}

.view {
    background-color: #88f;
}

.sub-view {
    background-color: #f88;
    cursor: pointer;
}

JavaScript

App = Ember.Application.create();

App.View = Ember.View.extend({
    templateName: 'app-view',
    classNames: ['view'],
    
    sayClick: function() {
        alert("Click!");
    },
    
    sayEnter: function() {
        alert("Enter!");
    },
    
    sayLeave: function() {
        alert("Leave!");
    }
});