Backbone.js - What is the best approach for global / generic / related models?

Question

I am currently creating an application using Backbone.js with a number of different models that are all connected to each other in different ways. I am currently experimenting with various architectural approaches.

In a nutshell, the model relationship looks something like this:

Workspace > Projects > Tasks 

There are several other models, such as lists and categories, that are attached to the project.

On the task list page, I dump the JSON of tasks onto the page and populate the collection. This works fine, but at the moment, all tasks occupy their own project data.

 task.project.id task.project.name 

Projects also drag in different places on the page for different lists. Tasks can also be part of the list that is assigned to the project. This means that I also make requests to view lists for the project in different places.

The main problem is that when updating the model I need to find a way to “synchronize” them. Which is crazy. All of them must use the same instance of the model so that each view uses the same model and is accordingly updated without having to do anything.

I studied various architectural projects of Backbone.js to try to find the answer. For example, Chaplin (https://github.com/moviepilot/chaplin) uses a mediation object to transfer data between views. Using this approach, I could have a collection of projects on a mediator and transmit it to various representations through an intermediary object.

Each project will include all its lists, categories, designated users, etc. Then I could query the project model as follows:

 App.Projects.get(12) 

Then the task will simply require the project identifier and the getter and setter method. Views can also easily access accessible projects, project lists, project users, without relying on delving into models or making further AJAX calls. In addition, task models will not require any project data from them.

However, dumping all of this data in a global object seems bad.

I could get something like this:

 App.Workspaces App.Workspaces.get(1) App.Projects App.Projects.get(12).get('lists')[0] App.Projects.get(12).get('users') 

To use the following:

 var projectId = model.get('project') var project = App.Projects.get(projectId) 

Or with getter method:

 var project = model.getProject() 

And add a pick as a dependency at the model level.

Adding a large global object like this adds a rather large dependency, which can make testing difficult. It also seems wrong to assume that the intermediary will even get an affordable project. Perhaps a model can do this, get it, and return it if it does not exist.

Any help here would be great! I would like to know how other people solved this problem.

Answer 1

I recommend having a common Collection for all of your Task models. Type of cache.

Something like: App.Store.Tasks .

Each time you need to first submit Poject.Tasks to App.Store.Tasks , and then:

A. If you find Task , then grab it and add it to your Project.Tasks .

B. If not found there, then create , fetch and add it to both: App.Store.Tasks and your Project.Tasks .

So another Project , which is trying to fetch a Task , which is already out, will do the same, and both of them will share the same Model .

When you change one of your Task models in Project you will change this Task in every other Project .