Change Backbone.Todos app to use camelCase JSON services

Author: mythz

src/Backbone.Todos/Global.asax.cs

@@ -41,6 +41,11 @@ public override object OnPost(Todo todo)
 			return todo;
 		}
 
+		public override object OnPut(Todo request)
+		{
+			return OnPost(request);
+		}
+
 		public override object OnDelete(Todo request)
 		{
 			RedisManager.ExecAs<Todo>(r => r.DeleteById(request.Id));
@@ -56,6 +61,9 @@ public AppHost() : base("Backbone.js TODO", typeof(TodoService).Assembly) { }
 
 		public override void Configure(Funq.Container container)
 		{
+			//Set JSON web services to return idiomatic JSON camelCase properties
+			ServiceStack.Text.JsConfig.EmitCamelCaseNames = true;
+
 			//Register Redis factory in Funq IOC
 			container.Register<IRedisClientsManager>(new BasicRedisClientManager("localhost:6379"));
 

src/Backbone.Todos/default.htm

@@ -60,9 +60,9 @@ <h1>Todos</h1>
     <!-- Templates -->
 
     <script type="text/template" id="item-template">
-      <div class="todo <%= Done ? 'Done' : '' %>">
+      <div class="todo <%= done ? 'done' : '' %>">
         <div class="display">
-          <input class="check" type="checkbox" <%= Done ? 'checked="checked"' : '' %> />
+          <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
           <div class="todo-content"></div>
           <span class="todo-destroy"></span>
         </div>
@@ -73,24 +73,22 @@ <h1>Todos</h1>
     </script>
 
     <script type="text/template" id="stats-template">
-      <% if (Total) { %>
+      <% if (total) { %>
         <span class="todo-count">
-          <span class="number"><%= Remaining %></span>
-          <span class="word"><%= Remaining == 1 ? 'item' : 'items' %></span> left.
+          <span class="number"><%= remaining %></span>
+          <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
         </span>
       <% } %>
-      <% if (Done) { %>
+      <% if (done) { %>
         <span class="todo-clear">
           <a href="#">
-            Clear <span class="number-done"><%= Done %></span>
-            completed <span class="word-done"><%= Done == 1 ? 'item' : 'items' %></span>
+            Clear <span class="number-done"><%= done %></span>
+            completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
           </a>
         </span>
       <% } %>
     </script>
-
-
-
+    
 <script type="text/javascript">
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-7722718-7']);

src/Backbone.Todos/todos.js

@@ -14,24 +14,24 @@ $(function(){
 
     // Default attributes for the todo.
     defaults: {
-      Content: "empty todo...",
-      Done: false
+      content: "empty todo...",
+      done: false
     },
 
     // Ensure that each todo created has `content`.
     initialize: function() {
-      if (!this.get("Content")) {
-        this.set({"Content": this.defaults.Content});
+      if (!this.get("content")) {
+        this.set({"content": this.defaults.content});
       }
     },
 
     // Toggle the `done` state of this todo item.
     toggle: function() {
-      this.save({Done: !this.get("Done")});
+      this.save({done: !this.get("done")});
     },
 
     url : function() {
-      return this.get("Id") ? 'todos/' + this.get("Id") : 'todos';
+    	return this.get("id") ? 'todos/' + this.get("id") : 'todos';
     },
 
     // Remove this Todo from *localStorage* and delete its view.
@@ -58,7 +58,7 @@ $(function(){
 
     // Filter down the list of all todo items that are finished.
     done: function() {
-      return this.filter(function(todo){ return todo.get('Done'); });
+      return this.filter(function(todo){ return todo.get('done'); });
     },
 
     // Filter down the list to only todo items that are still not finished.
@@ -70,12 +70,12 @@ $(function(){
     // GUID in the database. This generates the next order number for new items.
     nextOrder: function() {
       if (!this.length) return 1;
-      return this.last().get('Order') + 1;
+      return this.last().get('order') + 1;
     },
 
     // Todos are sorted by their original insertion order.
     comparator: function(todo) {
-      return todo.get('Order');
+      return todo.get('order');
     }
 
   });
@@ -122,7 +122,7 @@ $(function(){
     // To avoid XSS (not that it would be harmful in this particular app),
     // we use `jQuery.text` to set the contents of the todo item.
     setContent: function() {
-      var content = this.model.get('Content');
+      var content = this.model.get('content');
       this.$('.todo-content').text(content);
       this.input = this.$('.todo-input');
       this.input.bind('blur', this.close);
@@ -142,7 +142,7 @@ $(function(){
 
     // Close the `"editing"` mode, saving changes to the todo.
     close: function() {
-      this.model.save({Content: this.input.val()});
+      this.model.save({content: this.input.val()});
       $(this.el).removeClass("editing");
     },
 
@@ -201,11 +201,10 @@ $(function(){
     // Re-rendering the App just means refreshing the statistics -- the rest
     // of the app doesn't change.
     render: function() {
-      var done = Todos.done().length;
       this.$('#todo-stats').html(this.statsTemplate({
-        Total:      Todos.length,
-        Done:       Todos.done().length,
-        Remaining:  Todos.remaining().length
+        total:      Todos.length,
+        done:       Todos.done().length,
+        remaining:  Todos.remaining().length
       }));
     },
 
@@ -224,9 +223,9 @@ $(function(){
     // Generate the attributes for a new Todo item.
     newAttributes: function() {
       return {
-        Content: this.input.val(),
-        Order:   Todos.nextOrder(),
-        Done:    false
+        content: this.input.val(),
+        order:   Todos.nextOrder(),
+        done:    false
       };
     },