Backbone ViewModel vs (Data) Model

Question

In the spine, I can use my models in different ways.

As I understand it, a data (data) model is used to store data (possibly from a RESTful web server), and the ViewModel is used to store information about a particular view (for example, hidden / displayed states).

Most of my knowledge is related to this SO issue.

After reading this article, where the author says:

Render UI after changing data, not user interaction

and

Stream: user interaction → data change → view rendering.

For example, if we write a play / pause switch button in an audio player, the stream will be:

• User gets into the game
• The state of the model (data) changes to “playback
• View is displayed in playback mode

Following this pattern, you can switch this button to the correct position to change the state caused from other sources (for example, fast forward, new playlist, network error, etc.). In other words, we have one source of truth: whenever our model changes, we know that we need to display our button.

var PlayPauseButton = Backbone.View.extend({ tagName: 'li', className: 'icon', initialize: function(){ this.model.on('change:status', this.render, this); }, render: function(){ this.$el.removeClass('icon-play').removeClass('icon-pause'); this.$el.addClass('icon-' + (this.isPlaying() ? 'pause' : 'play')); }, events: { 'click': function(){ this.model.set('status', this.isPlaying() ? 'paused' : 'playing'); } }, isPlaying: function(){ return this.model.get('status') === 'playing'; } }); 

I began to wonder about the advantages and disadvantages of using each of them.

Assuming that we only have one model for each view (I know that we can have more, but if we restrict ourselves to one). I can think

ViewModel features:

• Those that are mentioned in the article.
  • View information is stored in the model, preventing clogging of the view.
  • Status information can be shared between views.

minuses:

• It is not possible to call the Backbone save () method, as this will cause the model to save incorrect data on the server (for example, the state of the views).
• It is not possible to call the getbone fetch () method because we can trample the data of our views.

(Data) Profi Page:

• Use the basic design created in save, select, etc. Representation
• can exchange data without worrying that certain data is stored in them.

minuses:

• Models can only be used for data.

Did I understand this correctly?

Should I have a model for my data and a model for my view?

How does it work with collections?

I know that the Beam is very free and there are no hard and fast rules. But does anyone have any real experience using one or the other? Or maybe both?

Any help is appreciated.

Answer 1

In fact, you assume that you cannot use your data (domain) models at the back and that you need to treat your data as ViewModel objects. How I was taught to do by experienced professionals in the field of:

1.) Always use ViewModels for views. Do not use domain models. Domain models are often not quite suitable for representations, and this leads to the fact that people use magic strings, request caching and even sessions to store information specific to viewing, and all this is not necessary.

2). Because of this, limiting you to the way you specified, for example, not being able to use the data model methods built into Backbone, use object mapping, either your own creation or another, made earlier to map ViewModel properties to properties of the Data model when you need to use it.

This allows you to have very specific ViewModels without worrying about the impossibility of using your own Backbone data models.

As for your little separate collection question, you should keep collections of ViewModel objects for other things you need. For example, if you have a list of cars, you should provide your CarListViewModel with a list of CarViewModel objects. If you decide to use data objects when you reach this far up the ladder of models, it has a lower impact, but it should still be avoided.