Demo with URL

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">
    <h1>Home page</h1>
    {{#linkTo 'index' sort=firstName}}Sort by First Name{{/linkTo}}
    {{#linkTo 'index' 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

# The order of params in model hooks has changed - see PR https://github.com/emberjs/ember.js/pull/3182 for details
# This should normally be set as window.ENV.NEW_MODEL_HOOKS_PARAM_ORDER before loading ember but this doesn't work on JSFiddle as this script is run after ember.js loads
Ember.NEW_MODEL_HOOKS_PARAM_ORDER = 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]
    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')}