JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type="text/x-handlebars" data-template-name="application">
    <h3>My app</h3>
    {{outlet}}
    {{view App.SomeView}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <div>
        <p>I'm the index template</p>
        <p><button {{ action "showPanel" }}>do something</button></p>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="myView">
    <div class="hide" id="myView">
        <p>I am the awesomest!</p>
    </div>
</script>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script type="text/javascript" src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>

CSS

em {font-style: normal}
.hide {
    display: none;
}

JavaScript

App = Ember.Application.create();

App.SomeView = Em.View.extend({
    templateName: 'myView',
    showPanel: function(){
        this.$().removeClass('hide');
        alert('called from view');
    }
});

App.IndexController = Em.ObjectController.extend({
    showPanel: function(){
        $('#myView').removeClass('hide');
        alert('called from controller')
    }
});