JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<script src="http://dl.dropbox.com/u/716525/content/emberv2/handlebars-1.0.rc.1.js"></script>
<script src="http://dl.dropbox.com/u/716525/content/emberv2/ember.js"></script>
<script src="http://dl.dropbox.com/u/716525/content/emberv2/ember-data.js"></script>
<script src="http://dl.dropbox.com/u/716525/content/emberv2/filtersortpage.js"></script>
<!DOCTYPE html>
<html>
<title>Users</title>
<body>

<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="parentView"}}/>
</div><br />

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

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

{{#each context in controller.sortColumns}}
<th><a {{action sortby context href=true target="controller"}}>{{context.column}}</a></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}}/></td>
      <td><input type="submit" value="delete" {{action removePerson person}}/></td>
    </tr>
   {{/each}}
</tbody>
</table>

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

</script>

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

{{#with view}}
{{#linkTo 'pagination' content}}
  <span {{bindAttr class="spanClasses...

JavaScript

PersonApp = Ember.Application.create();
PersonApp.SearchField = Ember.TextField.extend({
    keyUp: function(e) {
        var search = this.get('value');
        this.get('controller.target').send('searchUsers', {match:search});
    }
});

PersonApp.PersonView = Ember.View.extend({
    templateName: 'person',
    addPerson: function(event) {
        var username = event.context.username;
        if (username) {
            this.get('controller.target').send('addPerson', username);
            event.context.set('username', '');
        }
    }
});

PersonApp.Person = DS.Model.extend({
    username: DS.attr('string')
});

PersonApp.Store = DS.Store.extend({
    revision: 10,
    adapter: DS.Adapter.create({
        createRecord: function(store, type, object) {
            console.log(object.toJSON({ associations: true }));
        },
        findAll: function() {
            var one = PersonApp.Person.createRecord({id:1,username:'one'});
            var two = PersonApp.Person.createRecord({id:2,username:'two'});
            var three = PersonApp.Person.createRecord({id:3,username:'three'});
            var four = PersonApp.Person.createRecord({id:4,username:'four'});
            return [one,two,three,four];
        }
    })
});

PersonApp.PaginationView = Ember.View.extend({
    templateName: 'pagination',

    tagName: 'li',
    spanClasses: 'paginator pageNumber',

    isActive: function() {
        var currentPage = this.get('parentView.controller.currentPage');
        var page_id = this.get('content.page_id');

        if(currentPage) {
            return currentPage.toString() === page_id.toString();
        } else {
            return false;
        }
    }.property('parentView.controller.currentPage')
});

PersonApp.PersonController = Ember.ArrayController.extend(Ember.FilterSortSliceMixin, {
    content: [],
    sortBy: 'id',
    itemsPerPage: 2,
    paginationRoute: 'pagination',
    sortableRoute: 'sort'
});

PersonApp.Router.map(function(match) {
   ...