Knockout js - the MVVM isn't an actual thing...is it?

Question

I've inherited a knockout project, and I'm learning as I go, so I'm starting rather deeper in the pool than one would like.

To summarize, it's a page with a series of tabs, each tab opening its own page. One tab has a second set of tabs within that. Each tab points to its own

The things that's odd to me is the project has actually defined an object CALLED mvvm, which I'm pretty sure is at the very least confusing.

There's only one of these structures, snippet below, hopefully it's enough to make clear.

var ad = ad || {};
ad.mvvm = ad.mvvm || {};

ad.mvvm.documents = (function (ad, ko, document) {
    "use strict";
    var
        showLoadingScreen = function () {
            $('.loadingScreen').show();
        },
        hideLoadingScreen = function () {
            $('.loadingScreen').fadeOut(250);
        },
        tabs =
        [
            {
                name: "Suppliers",
                innerModel: null,
                template: 'template-attachedDocs-supplier',
                model: function () {
                    if (!this.innerModel) {
                        ad.views.supplier.init({});

                        this.innerModel = ad.views.supplier;
                    }
                    return this.innerModel;
                },
                setMethods: function () {
                    ad.views.uploadDocuments.callbacks.uploadFile = ad.views.supplier.uploadFile;
                    ad.views.supplier.viewModel.callbacks.deleteButtonClicked = ad.views.supplier.deleteSupplierDocument;
                    ad.views.supplier.viewModel.callbacks.updateButtonClicked = ad.views.supplier.updateSupplierDocument;

                    ad.views.supplier.viewModel.callbacks.uploadButtonClicked = function () {
                        ad.views.uploadDocuments.open(ad.views.supplier.viewModel.selectedSupplier(), ad.views.uploadDocuments.properties.source.Supplier);
                        ad.views.uploadDocuments.setTitle('Supplier - ' + ad.views.supplier.viewModel.selectedSupplier());
                    };

                    ad.views.uploadDocuments.callbacks.close = ad.views.supplier.refresh;
                    ad.views.uploadDocuments.callbacks.loading = showLoadingScreen;
                    ad.views.uploadDocuments.callbacks.loadingComplete = hideLoadingScreen;
                }
            }, {
                name: "Accounts",

(etc)

}
    ],
        init = function () {

            ad.views.documents.init(tabs, bulktabs);

            ko.applyBindings(ad.views.documents.viewModel, document.getElementById("documentsView"));

            ad.views.uploadDocuments.init({
                popup: "#AttachDocsPopup"
            });
            ko.applyBindings(ad.views.uploadDocuments.viewModel, document.getElementsByClassName("attachDocuments-modal")[0]);

        };



    return {
        init: init
    };
})(ad, ko, document);

$(document).ready(function () {
    "use strict";
            $('.loadingScreen').fadeOut(250);
            return -1;
        }
    }

    ad.mvvm.documents.init();

    $(".tabs").tabs({
    });

    $('.loadingScreen').fadeOut(250);
});

The main page is documentsview.aspx. All the viewModels are defined as vars in a single object in one file, each page/tab's view is a separate file. Each tab's content are in a separate ascx file, included as usercontrols in documentsview.aspx. This mvvm object is the only thing with an applybindings in the whole structure.

Now, it all WORKS, I hasten to add, so I assume the fact that it's being called mvvm doesn't break anything, cause technically I think you can call the bits anything you like, it just makes no sense not to use the standards.

So I think my question is, what is this object really? Is it the model for the main page, or the viewmodel for the main page, or what?

I'm having a number of other issues trying to correctly grab values and variables lower down in the process, but I don't think they'll be solved by making any changes here. I'm more trying to make sure I understand the structure, and what this thing actually is.

score 1 · Answer 1 · answered Apr 04 '18 at 19:45

1

The key to your answer is here

ko.applyBindings(ad.views.documents.viewModel, document.getElementById("documentsView"));

and here

ko.applyBindings(ad.views.uploadDocuments.viewModel, document.getElementsByClassName("attachDocuments-modal")[0]);

When you apply bindings you essentially say, this object (argument 1) matches this element (argument 2);

This is a very unconventional way to write Knockout (in my opinion), and I would highly recommend going through the ~30 minute tutorial on learn.knockout, It will bring you up to speed pretty quick.

answered Apr 04 '18 at 19:45

John Pavek

2,595
3
15
33

I have run through that, and it's by doing so that I realized the strangeness of how this project is set up. It all works, as I've already said, so I'm loath to change it, I just want to make sure I understand what's different and what it "really" is. There's some more info on using that second parameter here ( https://stackoverflow.com/questions/18990244/whats-the-applybindings-second-parameter-used-for ) and I understand why it's being used. It's more the oddly named "mvvm" I was trying to identify for myself. – VBartilucci Apr 04 '18 at 19:58

Knockout js - the MVVM isn't an actual thing...is it?

1 Answers1