複数のファイルにまたがるノックアウトビューモデル

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