跨多个文件的 Knockout 视图模型

Question

我有一个非常大的淘汰视图模型，它由数百个深入多个级别的其他视图模型组成。这个视图模型变得如此之大，我不得不将各种视图模型分离到它们自己的文件中。我使用 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 来完成我需要的吗？

谢谢！

Answer 1

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

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

跨多个文件的 Knockout 视图模型

Knockout view model across multiple files

javascript

requirejs

iife

knockout.js