Typescript-backbone: fix incorrect DOM structure

Currently the typescript-backbone app was using a not spec compliant
way to add classes to a div.

This is inline with what the main backbone app is doing and fixes 4
tests. The app still doesn't have routing, though.

Fix #830

examples/typescript-backbone/index.html

@@ -77,14 +77,12 @@ https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
 		<!-- Templates -->
 
 		<script type="text/template" id="item-template">
-			<div class="todo <%= completed ? 'done' : '' %>">
-				<div class="view display">
-					<input class="toggle check" type="checkbox" <%= completed ? 'checked' : '' %>>
-					<label class="todo-content"><%= title %></label>
-					<button class="destroy"></button>
-				</div>
-				<input class="edit todo-input" value="<%= title %>">
+			<div class="view display">
+				<input class="toggle check" type="checkbox" <%= completed ? 'checked' : '' %>>
+				<label class="todo-content"><%= title %></label>
+				<button class="destroy"></button>
 			</div>
+			<input class="edit todo-input" value="<%= title %>">
 		</script>
 
 		<script type="text/template" id="stats-template">

examples/typescript-backbone/js/app.js

@@ -138,7 +138,7 @@ var TodoView = (function (_super) {
     }
     // Re-render the contents of the todo item.
     TodoView.prototype.render = function () {
-        this.$el.html(this.template(this.model.toJSON()));
+        this.$el.html(this.template(this.model.toJSON())).toggleClass('completed', this.model.get('completed'));
         this.input = this.$('.todo-input');
         return this;
     };

examples/typescript-backbone/js/app.ts

@@ -207,7 +207,10 @@ class TodoView extends Backbone.View {
 
 	// Re-render the contents of the todo item.
 	render() {
-		this.$el.html(this.template(this.model.toJSON()));
+		this.$el
+			.html(this.template(this.model.toJSON()))
+			.toggleClass('completed', this.model.get('completed'));
+
 		this.input = this.$('.todo-input');
 		return this;
 	}