Question

我有一个非常大的淘汰视图模型，它包含数百个深层次的视图模型。这个视图模型变得如此之大，我不得不将各种视图模型分成他们自己的文件。我使用requirejs来合并所有这些文件以进行加载。我知道几乎没有关于requirejs的事情，我承认，但它似乎做了伎俩。我的主要人物，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文件并使用name作为依赖项。

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视图模型

1 个答案: