Splitting a knockout view model into multiple files

Question

My view model became very large, so I decided to split it into several files. I have already tried many different approaches, but nothing worked.

My model looks like this:

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 in multiple files. My latest 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 similar with a knockout? thanks

Answer 1

I would look at a library, for example RequireJS , which can be used to separate your view model 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 from John Papa about creating Single Pages Apps here .

Answer 2

Finally, I found a way to do it here . Here is a complete example:

 <div> Name: <input data-bind="value: name" type="text" /> <br /> Surname: <input data-bind="value: surname" type="text" /><br /> Fullname: <span data-bind="text: fullName"></span><br /> <button data-bind="click: showName">Show Name</button> </div> <script> Function.prototype.computed = function () { this.isComputed = true; return this; }; Object.prototype.makeComputeds = function () { for (var prop in this) { if (this[prop] && this[prop].isComputed) { this[prop] = ko.computed(this[prop], this, { deferEvaluation: true }); } } }; // file 1 var namespace = namespace || {}; namespace.model = function (params) { var self = this; self.name = ko.observable(params.name); self.surname = ko.observable(params.surname); self.makeComputeds(); }; // file 2 (function () { function showFullName(fullName) { alert(fullName); } ko.utils.extend(namespace.model.prototype, { showName: function() { showFullName(this.fullName()); }, // computed observable fullName: function() { return this.name() + " " + this.surname(); }.computed() }); })(); ko.applyBindings(new namespace.model({ name: "My Name", surname: "My Surname" })); </script> 

EDIT

There is a project called Durandal that combines RequireJS and KnockoutJS. It is worth seeing if you are interested in the best SPA architecture for KnockoutJS.