Добавление элемента в список задач в canjs

Question

Пытаясь скопировать и улучшить список задач на первой странице canjs.org, я наткнулся на небольшую загадку. В примере не показано, как добавить элементы в список задач. Поэтому я добавил "Добавить еще", который запускает newTodo при нажатии.

<h2>Todays to-dos</h2>
{{#selectedTodo}}
<input type="text" can-value="description" can-change="saveTodo">
{{/selectedTodo}}
<ul>
  {{#each todos}}
  <li>
    <input type="checkbox" can-value="complete" can-click="saveTodo">
    <span class="description {{#if complete}}done{{/if}}" can-click="select">{{description}}</span>
    <button can-click="destroy"><i class="fa fa-close"></i></button>
  </li>
  {{/each}}
  <li>
    <span class="description" can-click="newTodo">Add Another</span>
  </li>
</ul>

Затем я добавляю функцию newTodo, которая сбрасывает список Todos после сохранения нового.

var Todo = can.Model.extend({
  findAll: 'GET /todo/',
  findOne: 'GET /todo/{id}/',
  update: 'POST /todo/{id}/',
  destroy: 'POST /todo/delete/{id}/',
  create: 'POST /todo/new/',
}, {});

can.Component.extend({
  tag: 'todolist',
  template: can.view("/static/can/todo_list.html"),
  scope: {
    selectedTodo: null,
    todos: new Todo.List({}),
    select: function(todo){
      this.attr('selectedTodo', todo);
    },
    saveTodo: function(todo) {
      todo.save();
      this.removeAttr('selectedTodo');
    },
    newTodo: function() {
      var that = this;
      var t = new Todo({}).save(function() { that.attr("todos",new Todo.List({})) });
    },
  }
})
$(function() {
  $("#todo-wrapper").append(can.mustache("<todolist></todolist>")({}));
});

Однако это приводит к тому, что список полностью стирается, а затем переписывается, вызывая уродливый эффект мерцания. Я чувствую, что есть лучший способ сделать это.