Confusion about Models in Backbone + React application

Question

Here's an example that uses Backbone with React.

He defines a Model: var _todos = new Backbone.Model();

And then adds two functions to it:

var TodoStore = _.extend(_todos, {
  areAllComplete: function() {
    return _.every(_todos.keys(), function(id){
      return _todos.get(id).complete;
    });
  },
  getAll: function() {
    return _todos.toJSON();
  }
});

What I don't understand is why areAllComplete is being applied to a Model instead of to a Collection.

Shouldn't this be a function in a Collection that will get all of its models and check that complete attribute.

Similarly, I would expect getAll to belong to a Collection - get all of its models.

This example seems to replace Collection with Model.

Maybe I don't totally understand how models are used.

Himation

I don't understand why you would mix Backbone and Flux. – Manzano

Re:model v collection, it depends on how you store them on the server. It appears here that the model is in fact a list of todos, which each item just being keyed as an attribute on that model. The whole thing seems pretty goofy to me. – Manzano

@Mathletics is there a reason why I shouldn't use the two together? React is just the "V in MVC", right? I want to use Backbone for routing and Stores. I've been considering this approach. – Himation

I responded with React in mind. Is that what you meant? Or why am I using, specifically, Flux architecture with Backbone? – Himation

I meant what I said; I don't understand mixing Flux with Backbone. Backbone already handles data storage and events. (Though I will admit I'm not well-versed in Flux.) – Manzano

I was already planning on using React and decided to use Backbone for the stores and routing. Flux I'm using because I like the design pattern. – Himation

Answer 1

That example is using Backbone.Model in a fairly wierd way in my opinion.

This is where it's adding new todos to the store:

var id = Date.now();
  _todos.set(id, {
    id: id,
    complete: false,
    text: text
  });
}

What it's basically doing is setting every todo-item as an attribute of the Model, using the id as the attribute name. It ends up with _todos.attributes looking something like below

{
  "1436600629317": {
    "id": 1436600629317,
    "complete": false,
    "text": "foo"
  },
  "1436600629706": {
    "id": 1436600629706,
    "complete": false,
    "text": "bar"
  }
}

That's the same output you get from _todos.toJSON(). I've no idea why they decided to implement it like that, if they were to try using Backbone.Sync they'd end up with a server API that's not exactly RESTful. It seems strange to use Backbone without leveraging any of the things Backbone provides. There's a reference to the change event here but I don't see it being used anywhere. You could easily reimplement that store using any regular JS object.

The only thing that example seem to be actually using from Backbone is Backbone.Events in the dispatcher. You're totally right that using a Collection would make way more sense because then you could actually make it talk to a REST based server API. That example seems to only use Backbone for the sake of using Backbone.

Harumscarum