jsview, dynamic-templates, data-linking - Ok

HTML

<script src="http://borismoore.github.com/jsviews/jquery.render.js"></script>
<script src="http://borismoore.github.com/jsviews/jquery.observable.js"></script>
<script src="http://borismoore.github.com/jsviews/jquery.views.js"></script>
<button id="btnAdd">+ 1st taskGroup</button>
<button id="btnRemove">- 1st taskGroup</button>
<div id="taskbar">
    <ul id="tasklist"></ul>
</div>

<script id="tmpl" type="text/x-jsrender">
{{if tasks.length}}
    <li class="tasklist-item">{{>name}} ({^{:tasks.length}})</li>
{{/if}}
</script>

CSS

#taskbar
{
    background:#666; border:solid 1px #444; height:30px;
}
#tasklist {float:left;}

.tasklist-item
{
	float:left;
	
	height:28px; margin-left:4px;
	border:solid 1px rgba(255,255,255,.6); background:#444;
	font: 10px/28px Verdana; color:rgba(255,255,255,.8);
	padding:0 4px;
	min-width:100px;
}

JavaScript

var taskGroups = [{name:"Notepad", tasks:[]}];
var lastID=0;

$.templates({ tasklistTemplate: "#tmpl" });
$.link.tasklistTemplate("#tasklist", taskGroups);

$("#btnAdd").on("click", function()
{
    $.observable(taskGroups[0].tasks).insert(0, {taskID:++lastID});
});
$("#btnRemove").on("click", function()
{
    if(taskGroups[0].tasks.length)
    {
        $.observable(taskGroups[0].tasks).remove(0, 1);
    }
});