Splitting knockout view model into multiple files

javascript, knockout.js

Solution

I would take a look at a library like RequireJS which could be used to split your viewmodel into different 'modules' which are then loaded into your main ViewModel.

There are some very simple examples of using RequireJS with Knockout on the Knockout website here.

Take a look at some really helpful posts by John Papa on building Single Page Apps here.

Problem

My view model started getting very large so I decided to split it into multiple files. I have already tried many different approaches but nothing was working. My view model looks like: ``` namespace.model = function(constructorParam) { var self = this; self.param1 = ko.observable(constructorParam.param1); self.param2 = ko.observable(privateFunction(constructorParam)); self.clickEvent = function() { // do something with params // call some private funcitons privateFunction2(self.param2); }; function privateFunction(param) { // do some stuff } function privateFunction2(param) { // do some stuff } }; ``` I need to access private functions and observable parameters across multiple files. My final model should look like this: ``` // file 1 // contains constructor and param initialization + many common private helper funcitons namespace.model = function(constructorParam) { var self = this; self.param1 = ko.observable(constructorParam.param1); self.param2 = ko.observable(privateFunction(constructorParam)); function privateFunction(param) { // do some stuff } function privateFunction2(param) { // do some stuff } }; // file 2 // contains event hendlers self.clickEvent = function () { // i need to acces properties from namespace.model self.param1 // call some private funcitons privateFunction2(self.param2); }; // view model initialization ko.applyBindings(new namespace.model(initValues)); ``` Is it possible to achieve something like this with knockout? Thanks

Original source