Ember Query Params Demo

https://github.com/emberjs/ember.js/pull/3182

by alexspeller

HTML

<script src="http://ember.alexspeller.com/handlebars-1.0.0.js"></script>
<script src="http://ember.alexspeller.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <div class='url'>URL: {{target.url}}</div>
    {{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="index">
    {{#linkTo 'foo'}}Foo{{/linkTo}}
    {{#linkTo 'bar'}}Bar{{/linkTo}}
    {{#linkTo 'index'}}Index{{/linkTo}}
</script>

<script type="text/x-handlebars" data-template-name="foo">
    {{#linkTo 'foo'}}Foo{{/linkTo}}
    {{#linkTo 'bar'}}Bar{{/linkTo}}
    {{#linkTo 'index'}}Index{{/linkTo}}
</script>

<script type="text/x-handlebars" data-template-name="bar">
    {{#linkTo 'foo'}}Foo{{/linkTo}}
    {{#linkTo 'bar'}}Bar{{/linkTo}}
    {{#linkTo 'index'}}Index{{/linkTo}}
</script>

CSS

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

a:visited {
    color: blue;
}

a.active {
    color: black;
    text-decoration: none;
}

.url {
   font-family: sans-serif;
   padding: 0.5em;
   border: 1px inset #ccc;
   margin-bottom: 1em;
}

CoffeeScript

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

App.Router.reopen
  location: 'none'
    
App.Router.map ->
  @resource 'foo'
  @resource 'bar'