Knockout.js 击倒js——MVVM不是'；这不是真的……是吗？

我继承了一个淘汰赛项目，我边学边做，所以我开始在游泳池里更深一些

总而言之，这是一个包含一系列选项卡的页面，每个选项卡打开自己的页面。一个选项卡中有第二组选项卡。每个选项卡都指向自己的选项卡

让我感到奇怪的是，这个项目实际上定义了一个名为mvvm的对象，我很确定这至少是一个令人困惑的对象

这些结构中只有一个，下面是一个片段，希望它足够清楚

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);
});

主页是documentsview.aspx。所有视图模型都定义为一个文件中单个对象中的变量，每个页面/选项卡的视图都是一个单独的文件。每个选项卡的内容都位于单独的ascx文件中，作为用户控件包含在documentsview.aspx中。这个mvvm对象是整个结构中唯一具有applybindings的对象

现在，我想补充一点，这一切都是可行的，所以我假设它被称为mvvm这一事实不会破坏任何东西，因为从技术上讲，我认为你可以随意调用位，不使用标准是没有意义的

我想我的问题是，这个物体到底是什么？是主页的模型，还是主页的viewmodel，还是什么

---

我有很多其他的问题，试图在这个过程中正确地获取较低的值和变量，但我不认为在这里进行任何更改就能解决这些问题。我更努力的是确保我理解这个结构，以及这个东西到底是什么。

你答案的关键在这里

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

这里呢

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

当您应用绑定时，您本质上说，这个对象（参数1）匹配这个元素（参数2）

---

在我看来，这是一种非常非传统的击倒方式，我强烈建议您阅读约30分钟的教程，它会让您非常快地掌握进度。

我已经完成了这一过程，正是通过这样做，我意识到了这个项目的奇怪设置。正如我已经说过的，这一切都是有效的，所以我不愿意改变它，我只是想确保我理解什么是不同的，什么是“真正的”。这里有关于使用第二个参数（）的更多信息，我理解为什么要使用它。这更像是我试图为自己确定的一个奇怪的名字“mvvm”。