# TodoMVC example for Stimulus

**URL:** <https://discuss.hotwired.dev/t/todomvc-example-for-stimulus/174>\
**Category:** General\
**Created:** [March 11, 2018, 7:52am UTC](https://discuss.hotwired.dev/t/todomvc-example-for-stimulus/174 "2018-03-11T07:52:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![chloerei](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/chloerei/32/135_2.png) [@chloerei](https://discuss.hotwired.dev/u/chloerei)\
**Post date:** [March 11, 2018, 7:52am UTC](https://discuss.hotwired.dev/t/todomvc-example-for-stimulus/174/1 "2018-03-11T07:52:42Z")

</div>

Hi all,

I create a TodoMVC example for Stimulus.

Demo: [http://chloerei.com/todomvc-stimulus/](http://chloerei.com/todomvc-stimulus/)  
Source Code: `https://github.com/chloerei/todomvc-stimulus` (I can only post two links)

It’s all implement by client side (without rails). I plan to submit to `http://todomvc.com/` , please feel free to feedback. Actually I think it is best for stimulus maintainers to create one, I think I’m not writing well enough.

When I write the “mark all as done” action, I found communicating between controllers is a pain points. According to this issue:

> <https://github.com/stimulusjs/stimulus/issues/35>

I emit a DOM event for child controller:

```auto
this.todoListTarget.querySelectorAll('[data-action="todo#toggle"]:not(:checked)').forEach(function(toggle) {
	toggle.checked = true;
	toggle.dispatchEvent(new Event('change'));
})

```

That outer controller is know too much about inner controller, not good for modular. I hope it will be a better way to do this.

---

<div class="post-metadata">

**Author:** ![chloerei](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/chloerei/32/135_2.png) [@chloerei](https://discuss.hotwired.dev/u/chloerei)\
**Post date:** [March 11, 2018, 9:24am UTC](https://discuss.hotwired.dev/t/todomvc-example-for-stimulus/174/2 "2018-03-11T09:24:34Z")

</div>

Just an idea, how about provide a api to observe attribute changes? For example:

```auto
static get attributes() {
  return ['completed']
}

completedChanged(value) {
  if (value) {
    this.toggleTarget.checked = true;
    // other staff...
  } else {
    this.toggleTarget.checked = false;
    // other staff...
  }
}

attributeChanged(attributeName, value) {
  // if not predefine attributes
}

```

Then I can change state from outside without know the inner of the controller:

```auto
this.todoListTarget.querySelectorAll('[data-action="todo#toggle"]:not(:checked)').forEach(function(toggle) {
  toggle.setAttribute('data-completed', '');
})

```

An imaginary workflow: child controller emit event to notify parent controller, parent controller set attribute to change child controller state.