Использование jsviews с массивом длин

Question

У меня есть эта модель:

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

Моя цель состоит, чтобы отобразить каждый taskGroup в списке в следующем формате: {Name} {numOfTasks}

Если taskGroup имеет пустые задачи [] не должны отображаться.

Вот моя попытка как jsfiddle: http://jsfiddle.net/ARS2E/

Вот мой шаблон:

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

Вот мой 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); 
    } 
}); 

Я не смог получить это работать, и я не уверен, где я иду не так. Я бы очень признателен за любую помощь.

Answer 1

Два вопроса: First, {{if tasks.length}} не привязан к данным. Если вы напишете {^{if tasks.length}}, он будет привязан к данным.

Во-вторых, в jsfiddle у вас был неправильный путь для jsrender.js - это не jquery.render.js.