JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://toranbillups.com/static/script/jquery-1.9.1.js"></script>
<script src="http://toranbillups.com/static/script/handlebars-1.0.0-rc.3.js"></script>
<script src="http://toranbillups.com/static/script/ember-1.0.0-rc.1.js"></script>
<script src="http://toranbillups.com/static/script/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">

  <div id="main">
    {{ outlet }}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="person">
<div>
   {{view Ember.TextField valueBinding="username"}}
   <input type="submit" value="add" {{action addPerson this target="view"}}/>
</div><br />

<div>{{view PersonApp.SearchField placeholder="search..." valueBinding="searchText"}}</div>

<table width="250px">
<thead>

{{#each context in controller.sortColumns}}
<th>{{#linkTo "person.sort" context.column target="controller"}}{{context.column}}{{/linkTo}}</th>
{{/each}}

<th>update</th>
<th>delete</th>
</thead>
<tbody>
   {{#each person in controller.paginatedContent}}
    <tr>
      <td>{{person.id}}</td>
      <td>{{view Ember.TextField valueBinding="person.username"}}</td>
      <td><input type="submit" value="update" {{action updatePerson person target="controller"}}/></td>
      <td><input type="submit" value="delete" {{action deletePerson person target="controller"}}/></td>
    </tr>
   {{/each}}
</tbody>
</table>

<div name="prev">{{#linkTo "person.page" prevPage target="controller"}}Prev{{/linkTo}}</div>
<ul class="pagination gui-text">
  {{#each pages}}
    {{view PersonApp.PaginationView contentBinding="this"}}
  {{/each}}
</ul>
<div name="next">{{#linkTo "person.page" nextPage target="controller"}}Next{{/linkTo}}</div>

</script>

<script type="text/x-handlebars" data-template-name="pagination">

{{#with view}}
{{#linkTo "person.page" page}}
  <span {{bindAttr class="spanClasses isActive:active"}}>{{content.page_id}}</span>
{{/linkTo}}
{{/with}}

</script>

JavaScript

PersonApp = Ember.Application.create();

var get = Ember.get, set = Ember.set;

Ember.FilterSortSliceMixin = Ember.Mixin.create({

  filterBy: '',
  sortDirection: 'asc',

  availableColumns: function() {
    return ['id', 'username'];
  }.property(),

  sortColumns: function() {

    var sortable = [];
    var attributes = this.get('availableColumns');
    var exclude = this.get('excludeSort');

    for (var i = 0; i < attributes.length; i++) {
      sortable.push({ column: attributes[i], dir: 'asc' });
    }
    return sortable;

  }.property(),

  sortby: function() {
    var sortby = event.context.column;
    var incomingDirection = event.context.dir;
    var route = this.get('sortableRoute');
    var currentSortBy = this.get('sortBy');
    var currentSortDirection = this.get('sortDirection');
    var direction = 'asc';

    if (sortby === currentSortBy) {
      if (incomingDirection === currentSortDirection) {
        direction = 'desc';
      }
    }

    this.get('target').send(route, {column:sortby,dir:direction});
  }.property(),

  pages: function() {

    var availablePages = this.get('availablePages'),
    pages = [],
    page;

    for (i = 0; i < availablePages; i++) {
      page = i + 1;
      pages.push({ page_id: page.toString() });
    }

    return pages;

  }.property('availablePages'),

  currentPage: function() {

    return parseInt(this.get('selectedPage'), 10) || 1;

  }.property('selectedPage'),

  nextPage: function() {

    var nextPage = this.get('currentPage') + 1;
    var availablePages = this.get('availablePages');

    if (nextPage <= availablePages) {
        return PersonApp.Page.create({id: nextPage});
    }else{
        return PersonApp.Page.create({id: this.get('currentPage')});
    }

  }.property('currentPage', 'selectedPage', 'paginatedContent.length'),

  prevPage: function() {

    var prevPage = this.get('currentPage') - 1;
    var availablePages = this.get('availablePages');

    if (prevPage > 0) {
        return...