JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script type="text/x-handlebars">
    {{view "Ember.TextField" valueBinding="search"}}
    <button {{action "goto"}}>search</button>
    <br>
    {{ outlet }}
    <br>
    <button {{action "showURL"}}>show URL</button>
</script>

<script type="text/x-handlebars" data-template-name="query">
    <p>You are Searching for: <b>{{ text }}</b></p>
</script>

CSS

section {
    background-color: green;
}

CoffeeScript

window.App = Ember.Application.create
    LOG_TRANSITIONS: true

App.ApplicationController = Ember.Controller.extend
    search: "default"
    init: () ->
        @_super()
        router = @container.lookup('router:')
        @set "theRouter", router
        
    goto: () ->
        search = @get "search"
        newQuery = App.Query.create(text:search)
        #App.QueryArray.push newQuery
        @transitionToRoute("query", newQuery)
    
    showURL: () ->
        router = @get "theRouter"
        console.log router.get("url")
                                       
#App.QueryArray = Em.A()
    
App.Query = Em.Object.extend
    text: ''

App.Router.map () ->
    this.resource "query", {path: "/query/:query_text"}
    
App.QueryRoute = Ember.Route.extend
    model: (params) ->
        return params
        #App.QueryArray.findProperty('text', params.text)
    setupController: (controller, model) ->
        console.log "your model is #{model}"