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>
    {{anchorLocation}}
    {{#linkTo anchor='#login'}}Show login{{/linkTo}}
    {{#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>
    
    <h1>Some highly important text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim nibh id nisi porttitor facilisis. Ut id faucibus augue, faucibus cursus eros. Phasellus nec dui sit amet elit rhoncus elementum. Aenean aliquet, nisi a sagittis adipiscing, est risus venenatis augue, et eleifend urna neque faucibus felis. Donec at consequat purus. Donec luctus pretium metus, a mattis sapien condimentum quis. Ut placerat enim id dignissim laoreet.</p>

    <p>Aenean at lacus ligula. Quisque accumsan turpis at purus sagittis tristique. Curabitur porttitor, enim eu aliquam suscipit, velit nunc fringilla arcu, aliquam porta velit felis at tellus. Proin varius eleifend adipiscing. Sed id sem molestie, aliquet erat ac, molestie arcu. Duis a mauris ut orci molestie interdum vitae et orci....

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: ['anchor', '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 'anchorLocation', queryParams.anchor
    controller.set 'filterString', queryParams.filter
    controller.set 'isShowingTwitter', queryParams.showTwitter
    controller.set 'sortProperties', if queryParams.sort
       [queryParams.sort]
    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')}
    
  showAnchor: (->
    $elem = $(@anchorLocation)
    $scrollTo = $('body').scrollTop($elem.offset().top)

    #this.transitionTo(item.route).then($scrollTo)
  ).observes 'anchorLocation'