Using `value` to get rid of imperative functions

CanJS
1

The following creates a Todo and when saved, replaces it with another todo:

Component.extend({
    tag: "todos-app",
    view: `
            <input placeholder="What needs to be done?" value:bind="this.newName" />
            <button on:click="this.save()" type="button">Add</button>
    `,
    ViewModel: {
        newName: "string",
        save() {
            const todo = new Todo({name: this.newName});
            todo.save();
            this.newName = "";
        }
    }
});

The following does the same thing, but using value:

Component.extend({
    tag: "todos-app",
    view: `
            <input placeholder="What needs to be done?" value:bind="this.todo.name" />
            <button on:click="this.todo.save()" type="button">Add</button>
    `,
    ViewModel: {
        todo: {
          value( {resolve, listenTo, stopListening} ) {
              function todoCreated(){
                stopListening(todo);
                todo = resolve( new Todo({name: ""}) );
                listenTo(todo, "created", todoCreated);
              }
              var todo = resolve( new Todo({name: ""}) );
             
              listenTo(todo, "created", todoCreated)
          }
        }
    }
});