Knockout js - MVVM 不是一个实际的东西......是吗？

Question

我继承了一个淘汰赛项目，我边走边学，所以我开始的时候比人们想要的更深。

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

让我感到奇怪的是，该项目实际上定义了一个名为 CALLED mvvm 的对象，我敢肯定它至少是令人困惑的。

这些结构只有一个，下面是sn-p，希望足以说明清楚。

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 并不会破坏任何东西，因为从技术上讲，我认为你可以随意调用这些位，不这样做是没有意义的使用标准。

所以我想我的问题是，这个对象到底是什么？是主页面的模型，还是主页面的视图模型，还是什么？

我在尝试正确获取过程中较低的值和变量时遇到了许多其他问题，但我认为在此处进行任何更改都不会解决这些问题。我更努力确保我理解结构，以及这东西实际上是什么。

Answer 1

答案的关键就在这里

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

这里

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

当您应用绑定时，您实际上是在说，此对象（参数 1）匹配此元素（参数 2）；

这是编写 Knockout 的一种非常规的方式（在我看来），我强烈建议您阅读 learn.knockout 上大约 30 分钟的教程，它会让您快速上手。