TodoMVC example for Stimulus

1

Hi all,

I create a TodoMVC example for Stimulus.

Demo: 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:

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.

2

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.