MVVM terminology and tutorial: Code-behind-file, separating ViewModel and Model


#1

Hey there, noob question but as a fan of sound terminology I wonder: what is the code-behind-file within the MVVM pattern? The ViewModel? The Model? Or like the css, is it part of the View, i.e. the View consisting of multiple file types?

And why is it called MVVM while in fact the “call chain” is View <-> ViewModel -> Model, so shouldn’t it be V2M2?

And finally, why in the groceries tutorial within playground is the ViewModel a mixup of presentation and business logic? Why not putting us newbies on the right track from the beginning and clearly separating viewmodels and models (or maybe I overlooked it)?


#2

I might be wrong but here is my take on it:

The view is made up of a template file (.xml/.html) and a code file (.ts/.js) that is used as the bridge between the rest of your app and the view layer. You then have VM code and Model code (+ what other layers your app will need). These could be in different files/classes or could be all in one file.

Why it is called MVVM instead of something else would be purely down to subjectiveness and how memorable it is(Why is MVC called MVC and not MCV or VCM?)


#3

Thank you, Roland. And right, I probably should have skipped the V2M2 question :wink:
What mostly confuses me is: where (ViewModel file, Model file, other js files) to put which type of code (plausibility checks for form entries, fetching data from a REST API, performing calculations on fetched data…etc) ? I see no clear guidelines, no architectural best practices, or maybe I am not looking at the right place?


#4

The way I have been coming is (I use {N} core so angular may be slightly different)

Xml for template, code behind file to handle any VIEW ONLY logic (say maybe animations, radList stuff, etc.)
a View Model file (In my projects i reuse VM across multiple views, you could instead do a 1:1).
I then do a Helper Backend class that calls an DB class code and API class calls (for example a GET call could call GET.api and then INSERT.db, then return the information, but that logic is dependent on the needs of the app)


#5

For me MVVM just means i have a js file that has a model bound to the xml view. Changes in either affect either :slight_smile:


#6

So in essence, one could say that the “code-behind-file” is the ViewModel file which handles the presentation logic, right?