跨多个文件的淘汰视图模型答案

【问题标题】：Knockout view model across multiple files跨多个文件的淘汰视图模型
【发布时间】：2017-06-10 22:46:01
【问题描述】：

我有一个非常大的淘汰视图模型，它由数百个其他视图模型组成，这些视图模型深入了几个层次。这个视图模型变得如此之大，我不得不将各种视图模型分离到它们自己的文件中。我使用 requirejs 来合并所有这些文件以进行加载。我承认，我对 requirejs 几乎一无所知，但它似乎起到了作用。我的 main,js 是这样的：

requirejs(
["Scripts/ViewModel/Shipment/consts.js",
"Scripts/ViewModel/Shipment/utils.js",
"Scripts/ViewModel/Shipment/functions.js",

"Scripts/ViewModel/Shipment/OptionListItemVM.js",
"Scripts/ViewModel/Shipment/OptionsVM.js",
"Scripts/ViewModel/Shipment/ShipmentOptionsVM.js",
"Scripts/ViewModel/Shipment/PackOptionsVM.js", .... (and so on)

非常基本的东西，而且可能不正确。所以现在所有这些文件都作为全局变量加载，这很糟糕。将所有这些淘汰视图模型（跨越多个文件）作为全局加载到 1 个命名空间的最佳方法是什么？ requirejs 是否通过 define() 提供了任何功能？还是应该手动更改要在这 1 个命名空间中定义的每个视图模型？

另外，可以利用 IIFE 来完成我的需要吗？

谢谢！

【问题讨论】：

标签： javascript knockout.js requirejs iife

【解决方案1】：

您应该创建一个模块，该模块将被异步加载，并且可以在您需要的任何地方使用定义和注入为您的自定义模型缓存。

define(['module1', 'module2'], function (mod1, mod2) {
$('#btn').click(function () {
    mod1.runJob(mod2.url, 'complete', 5000, 20000);
});

$('#btn2').click(function () {
    mod2.runJob(mod2.url, 'complete2', 5000, 20000);
}); });

然后你可以使用这个（mod1和mod2是这个模块的依赖），这个模块可以是其他模块的依赖。

对于通用脚本，您可以创建 app.config 文件并使用名称作为依赖项。

requirejs.config({
paths: {
    "jquery": "jquery-1.10.2",
    "jquery-ui": "jquery-ui-1.11.4",
    "General": "General",
    "knockout": "knockout-3.4.0.debug",
    "komapping": "knockout.mapping-latest.debug",
    "modernizr": "modernizr-2.8.3",
    "respond": "respond",
    "underscore": "underscore",
    "datatable": "DataTables/jquery.dataTables",
    "bootstrap": "bootstrap",
    "bootstrap-dialog": "bootstrap-dialog",
    "bootstrap-datepicker": "bootstrap-datepicker"
},
shim: {
    "jquery.appender": ["jquery"],
    "jquery.textReplacer": ["jquery"],
    "jquery-ui": {
        "deps": ["jquery"],
        "exports": "$"
    },
    "bootstrap-responsive": {
        "deps": ["bootstrap", "respond"],
        "exports": "bootstrap-responsive"
    },
    "komapping": {
        "deps": ["knockout"],
        "exports": "komapping"
    },
    "bootstrap": {
        "deps": ["jquery"],
        "exports": "bootstrap"
    },
    "bootstrap-dialog": {
        "deps": ["bootstrap", "jquery"],
        "exports": "bootstrap-dialog"
    }
} });

及用法如下。

define(['jquery', 'knockout', 'model'],
function ($, ko, model) {
    $(function () {
      model.init().always(function () {
            ko.applyBindings(model);
        });
    });
});

【讨论】：