# Using \`value\` to get rid of imperative functions

**URL:** <https://forums.bitovi.com/t/using-value-to-get-rid-of-imperative-functions/1061>\
**Category:** CanJS\
**Created:** [March 21, 2019, 7:37pm UTC](https://forums.bitovi.com/t/using-value-to-get-rid-of-imperative-functions/1061 "2019-03-21T19:37:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [March 21, 2019, 7:37pm UTC](https://forums.bitovi.com/t/using-value-to-get-rid-of-imperative-functions/1061/1 "2019-03-21T19:37:53Z")

</div>

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

```auto
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`:

```auto
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)
          }
        }
    }
});

```