TodoMVC example for Stimulus

Hi all,

I create a TodoMVC example for Stimulus.

Source Code: (I can only post two links)

It’s all implement by client side (without rails). I plan to submit to , 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:

I emit a DOM event for child controller:

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.

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

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:

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.