ViewModel in a live code sandbox

react
1

@antoninadert did the awesome job of configuring a code sanbox instance so it works with ViewModel !

Of course I had to put it to the test and so here’s the proverbial ToDoList with ViewModel in a live environment that you can modify and play with. Here’s the source code if you want to see how it works with Meteor. And also an article explaining the code.

@arggh wrote a post with his experience. It’s about the Blaze version but the same can be said about the React one. As he mentions, it’s hard to see the value of VM at first glance because you have to actually try it to see that it really cuts down your code and simplifies it a lot. Not because it has syntactic sugar, but because it’s a much simpler paradigm and it’s designed with developer happiness in mind.

3 Likes
2

You’ve been away from ViewModel for too long, since there seems to be a bug in the ToDo-app (at least with Safari) :beetle:

// src/TodoList/Main/ListItem/ListItem.js
 <input
          b="check: completed, click: completeItem"
          class="toggle"
          type="checkbox"
        />

Actually seems to double-negate the prop change.

As a quick test, this seems to work on Safari and Chrome (even if it looks a bit dodgy too).

 <input
          b="check: completed, click: save"
          class="toggle"
          type="checkbox"
        />
3

Now that you mention it, the behavior in other browsers is the odd thing. I’ll look into it.

4

Fixed. I used an autorun to save when the checkbox changes:

  autorun() {
    this.completed.depend();
    if (c.firstRun) return;
    // Don't want to depend on the things `save` uses.
    ViewModel.Tracker.nonreactive(this.save);
  },
  render() {
    <li b="class: { completed: completed, editing: editing }">
      <div class="view">
        <input
          b="check: completed"
          class="toggle"
          type="checkbox"
        />

The previous version was working on other browsers by pure chance.

1 Like
5

I was hoping you would come up with a solution without autorun :thinking: I have over 600 components in my app. Most of them use ViewModel. The funny thing is, out of all of them, the most trouble I had was the checkbox-component (utilizing a checkbox input, not just div with click bindings)!

I am not sure if I was trying to allow too many different ways to use it, thus making a simple thing complex, or if there’s something quirky about using VM bindings with checkbox. Especially when making a reusable component.

edit: by quirky, I mean not well-suited for the flow of events & actions

6

No autorun coming up:

        <input
          b="check: completed, change: save"
          class="toggle"
          type="checkbox"
        />
1 Like