Permalink
Browse files

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.
  • Loading branch information...
barkmadley committed Jun 16, 2011
1 parent 05cbeba commit e840637ea46e7a08a67f868529d143bbae650be9
Showing with 54 additions and 18 deletions.
  1. +4 −4 _layouts/default.html
  2. +19 −0 js/plugins.js
  3. +31 −14 things/todos.html
View
@@ -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.
View
@@ -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);
View
@@ -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>

0 comments on commit e840637

Please sign in to comment.