Ember Query Params Demo

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

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">
  <h1>Home page</h1> {{#linkTo sort="firstName"}}Sort by First Name{{/linkTo}} {{#linkTo sort="lastName"}}Sort by Last Name{{/linkTo}}
  <label>{{input type=checkbox checked=isShowingTwitter}} Show Twitter</label>
  <ul>
    {{#each filteredContent}}
    <li>
      {{firstName}} {{lastName}} {{#if controller.isShowingTwitter}} (@{{twitter}}) {{/if}}
    </li>
    {{/each}}
  </ul>
  {{input value=filterString action="filterList"}}
  <button {{action filterList filterString}}>Filter</button>

  {{#linkTo 'index' filter=false}}Clear Filter{{/linkTo}}

  <p>{{#linkTo 'index' queryParams=false}}Clear All Params{{/linkTo}}</p>


</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

Ember.FEATURES["query-params"] = true

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

App.Router.map ->
  @resource 'index', path: '/', queryParams: ['sort', 'filter', 'showTwitter']


App.IndexRoute = Em.Route.extend
  model: ->
    [{firstName: 'Kris', lastName: 'Selden', twitter: 'krisselden'},
    {firstName: 'Luke', lastName: 'Melia', twitter: 'lukemelia'},
    {firstName: 'Formerly Alex', lastName: 'Matchneer', twitter: 'machty'},
    {firstName: 'Alex', lastName: 'Speller', twitter: 'alexspeller'}]

  events:
      filterList: (string) ->
        @transitionTo 'index', queryParams: {filter: string}
    
  setupController: (controller, context, queryParams) ->
    controller.set 'model', context
    controller.set 'filterString', queryParams.filter
    controller.set 'isShowingTwitter', queryParams.showTwitter
    controller.set 'sortProperties', if queryParams.sort
       [queryParams.sort]http://jsfiddle.net/alexspeller/K9xUP/#
    else
      null
     


App.IndexController = Em.ArrayController.extend
  filteredContent: (->
    filter = @get('filterString')
    @filter (person) ->
      Em.isEmpty(filter) or
      ~person.firstName.indexOf(filter) or ~person.lastName.indexOf(filter)
  ).property '[]'

  showTwitterObserver: (->
    Em.run.once @, @transitionTwitter
  ).observes 'isShowingTwitter'
  
  transitionTwitter: ->
    @transitionToRoute queryParams: {showTwitter: !!@get('isShowingTwitter')}