moved to completely unobtrusive javascript.

added a preBindTemplate to the dataBind plugin.
this moves the contents of the element into a script block
so that KO knows how to handle it.

_layouts/default.html

@@ -26,12 +26,12 @@
 
 
   <!-- CSS: implied media="all" -->
-  <link rel="stylesheet" href="/css/style.css?v=9">
-  <link rel="stylesheet" href="/css/pygments.css?v=9">
+  <link rel="stylesheet" href="/css/style.css?v=10">
+  <link rel="stylesheet" href="/css/pygments.css?v=10">
   <link rel="stylesheet" href="/js/libs/sb/shadowbox.css">
 
   <!-- Uncomment if you are specifically targeting less enabled mobile browsers
-  <link rel="stylesheet" media="handheld" href="/css/handheld.css?v=9">  -->
+  <link rel="stylesheet" media="handheld" href="/css/handheld.css?v=10">  -->
 
   <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
   <script src="/js/libs/modernizr-1.7.min.js"></script>
@@ -63,7 +63,7 @@ <h3>
   <script src="/js/libs/sb/shadowbox.js"></script>
 
   <!-- scripts concatenated and minified via ant build script-->
-  <script src="/js/plugins.js?v=9"></script>
+  <script src="/js/plugins.js?v=10"></script>
   <script>
 /* Author: Mark Bradley
  * no point in putting this in a seperate file when its so small.

js/plugins.js

@@ -59,5 +59,24 @@ window.log = function(){
         });
     };
 
+    /** this is quite a massive hack 
+     it works around the fact that you cannot simply host a template inside a normal element
+     since it won't have the text attribute that a script tag does.
+     */
+    $['fn']['preBindTemplate'] = $['fn']['preBindTemplate'] || function () {
+      /* don't return anything */
+      this['each'](function () {
+        var id   = $(this)['attr']('id');
+        /* grab the html */
+        var html = $(this)['html']();
+        /* move the old template to a different id */
+        /* todo, do something clever with the template */
+        $(this)['attr']('id', id + 'old');
+        /* add a new template with the right id */
+        $("<script type='text/html' id='" + id + "'>" +
+          html + "<\/script>")['appendTo']($("body")[0]);
+      });
+    };
+
 })(jQuery);
 

things/todos.html

@@ -3,21 +3,18 @@
 title: knockout todos
 ---
 
-<script type="text/html" class="hidden" id="tasksTemplate">
-<div class="item"
-  data-bind="css: { done: isDone, editing: isEditing }, event: { dblclick: startEdit }">
-  <div class="view" title="Double click to edit...">
-    <input type="checkbox" data-bind="checked: isDone">
-    <span data-bind="text: name"></span>
-    <a class="destroy"
-      data-bind="click: function () { viewModel.tasks.remove($data); }"></a>
-  </div>
-  <div class="edit">
-    <input type="text"
-      data-bind="value: name, event: { keyup: endEditEnter, blur: endEdit }">
+<div type="text/html" class="hidden" id="tasksTemplate">
+  <div class="item">
+    <div class="view" title="Double click to edit...">
+      <input type="checkbox">
+      <span></span>
+      <a class="destroy"></a>
+    </div>
+    <div class="edit">
+      <input type="text">
+    </div>
   </div>
 </div>
-</script>
 
 
 <div id="views">
@@ -90,6 +87,27 @@ <h2><a href="https://github.com/barkmadley/barkmadley.github.com/blob/master/thi
     "text": "openTasks"
   });
 
+  $("#tasksTemplate .item").dataBind({
+    "css": { "done": "isDone", "editing": "isEditing" },
+    "event": { "dblclick": "startEdit" }
+  });
+  $("#tasksTemplate .view input[type=checkbox]").dataBind({
+    "checked": "isDone"
+  });
+  $("#tasksTemplate .view span").dataBind({
+    "text": "name"
+  });
+  $("#tasksTemplate .view .destroy").dataBind({
+    "click": "function() { viewModel.tasks.remove($data); }"
+  });
+  $("#tasksTemplate .edit input").dataBind({
+    "value": "name",
+    "event": { "keyup": "endEditEnter", "blur": "endEdit" }
+  });
+
+  /* prebind the template places it in a script block so KO knows what to do */
+  $("#tasksTemplate").preBindTemplate();
+
   /* initial state is an empty task list and an empty task string */
   viewModel.tasks = ko.observableArray(
     /* load tasks from localStorage if available or [] */
@@ -139,7 +157,6 @@ <h2><a href="https://github.com/barkmadley/barkmadley.github.com/blob/master/thi
   }, viewModel);
 
   ko.applyBindings(viewModel, $("#tasks")[0]);
-
 };
 </script>