Define our model

var Client = Backbone.Model.extend({
  fullname: function() {
    return this.get('firstname') + ' ' + this.get('lastname');
  }
});

Change some data

client1.set("email", "jane2@example.com");
client1.save();

Data filtering

var Clients = Backbone.Collection.extend({
  model: Client,
  url: "/api/clients",

  unpaid: function() {
    return this.filter(function(client) { return client.get('balance') > 0; });
  }

  outOfState: function() {
    return this.filter(function(client) { return client.get('state') != "WA"; });
  }

});

  addAll: function() {
    this.clients.each(this.addOne);
  },

  addNewClient: function() {
    this.clients.create({
      name: this.$("input.name").val(),
      bill: this.$("input.bill").val(),
      state: this.$("input.state").val(),
    });
  }

});

var ClientListing = Backbone.View.extend({
  tagName: "div",
  events: {
    "submit form":        "addNewClient"
  },

  initialize: function() {
    this.clients = new Clients();

    this.clients.bind('add',     this.addOne);
    this.clients.bind('reset',   this.addAll);
  },

  addOne: function(item) {
    var view = new ClientRow(item);
    this.$el.append( view.render() );
  },

  updateClient: function() {
    this.model.set("name", this.$('input.name').val());
    this.model.save();
  },

  clear: function() {
    this.model.destroy();
  }

});

var ClientRow = Backbone.View.extend({
  tagName: "li",
  className: "client-row",
  template: Mustaches['client_row'],

  events: {
    "keypress input":       "updateClient",
    "click .button.delete": "clear"
  },

  initialize: function() {
    this.model.bind("change", this.render);
  }

  render: function() {
    html = this.template.render(this.model.toJSON())
    this.$el.html( html );
  },

Listing Template

<div id="user-info">
  Signed in as  (<a href="#" class="log-out">Log out</a>)
</div>

<div id="newClientForm">
  <input id="new-client" placeholder="Add a client..." type="text" />
  <input id="new-bill" placeholder="$..." type="text" />
  <input id="new-state" placeholder="State..." type="text" />
</div>

<ul id="client-list">
  <img src='images/spinner.gif' class='spinner' />
</ul>

Row Template

<li class="{{#local}}local{{/local}}">

  <div class="view">
    <input class="edit edit-name" value="{{ name }}">
    <input class="edit edit-bill" value="{{ bill }}">
    <input class="edit edit-state" value="{{ state }}">
    <button class="client-destroy"></button>
  </div>

</li>

Example Template

<script type="text/template" id="item-template">
<li class="<%= done ? 'completed' : '' %>">
    <div class="view">
        <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %>>
        <label class="todo-content"><%= content %></label>
        <button class="todo-destroy"></button>
    </div>
    <input class="edit" value="<%= content %>">
</li>
</script>

Parse application for managing clients

Parse.com

Clients App