Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Query Params: server-side sorting for emberjs site" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
</head>
<body>
    <script type="text/x-handlebars" data-template-name="application">
    <h2>Query Params: server-side sorting</h2>
    
    <p>
      In this example, we simulate making a request
      to the server every time the sortBy query
      param changes. Query param changes by 
      default don't refire the `model` hook,
      but if you need to reload data from the 
      server, you can opt into it, by calling
      `this.refresh()` in the `queryParamsDidChange`
      action.
    </p>
    
    <h3>Sorting by {{sortBy}}</h3>
    <table>
      <thead>
        <tr>
          <th>
            {{linkTo "First Name" (query-params sortBy="firstName")}}
          </th>
          <th>
            {{linkTo "Last Name" (query-params sortBy="lastName")}}
          </th>
          <th>
            {{linkTo "Location" (query-params sortBy="location")}}
          </th>
        </tr>
      </thead>
      <tbody>
        {{#each}}
          <tr>
            <td>{{firstName}}</td>
            <td>{{lastName}}</td>
            <td>{{location}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </script>
  
</body>
</html>
 
App = Ember.Application.create();
​
App.ApplicationRoute = Ember.Route.extend({
  queryParams: {
    sortBy: {
      // opt into full transition
      refreshModel: true
    }
  },
  model: function(params) {
    var defer = Ember.RSVP.defer();
    
    // Simulate AJAX query.
    var resultFromServer = [
      {firstName: 'Kris', lastName: 'Selden', location: 'Seattle'},
      {firstName: 'Luke', lastName: 'Melia', location: 'Chelsea'},
      {firstName: 'Formerly Alex', lastName: 'Matchneer', location: 'Williamsburg'}
    ].sortBy(params.sortBy);
    
    Ember.run.later(defer.resolve, resultFromServer, 400);
    return defer.promise;
  }
});
​
App.ApplicationController = Ember.ArrayController.extend({
  queryParams: ['sortBy'],
  sortBy: 'firstName'
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
billybonkspro
0viewers