Question

I am attempting to create a generic Container for my viewModels so common methods can be applied a variety of objects without specific knowledge ot the viewModel. The container and contained object would look like this:

var containedViewModel = function() {
  var self = this;
  self.id = ko.observable();
    ...
  self.doSomething = function() {
  alert('here');
  };

}

var ContainerModel = function(cRoot, cModel, cName) {
  var self = this;

  self.rootModel  = cRoot;                       // Root view model
  self.viewName   = cName;                       // viewModel container name
  self.refModel   = cModel;                      // viewModel reference
  self.viewModel  = ko.observable();             // Single view model
  self.viewModels = ko.observableArray();        // Array of view models

  self.init = function(rootModel) {
    self.viewModel = new self.refModel();
  } 
  self.doSomething = function() {
    self.rootModel.doSomeThing();    // This works
    self.refModel.doSomeThing();     // This does not work
    self.viewModel.doSomeThing();    // This does not work as well
  } 

}

And the container would be created with a call like:

var ParnentModel = function() {
  var self = this;
  self.id = ko.observable();
    ...
  self.container = new ContainerModel(self, containedViewModel, 'modelName');
    ...
  self.doSomething = function() {
  alert('here');
  };
};

In this example the rootModel function access works fine because the actual viewmodel is created and passed to the container. Using ‘new self.refModel()’ and ‘self.rootModel.doSomeThing()’ appear to work as expected. When I attempt to use ‘self.viewModel.doSomeThing();’ knockout complains that it is not a function.

Is it possible to access a viewModels functions by reference to the viewModel.

Any help would be appreciated.

Answer 1

You’re almost there. See my comments inside the code.

var containedViewModel = function() {
  var self = this;
  self.id = ko.observable();
  self.doSomething = function() {
    alert('contained');
  };
  // I would prefer to have return self here
};

var ContainerModel = function(cRoot, cModel, cName) {
  var self = this;

  self.rootModel  = cRoot;                       // Root view model
  self.viewName   = cName;                       // viewModel container name
  self.refModel   = cModel;                      // viewModel reference
  self.viewModel  = ko.observable();             // Single view model
  self.viewModels = ko.observableArray();        // Array of view models

  self.init = function(rootModel) {
    // you meant this, right?
    self.viewModel(new self.refModel());
  }; 
  self.doSomething = function() {
    self.rootModel.doSomething();    // This works
    //self.refModel.doSomeThing();     // This does not work
    // need to unwrap the value, fixed typo
    self.viewModel().doSomething();    // This does not work as well
  };
};

var ParnentModel = function() {
  var self = this;
  self.id = ko.observable();
  self.container = new ContainerModel(self, containedViewModel, 'modelName');
  // missing call to init
  self.container.init();
  self.doSomething = function() {
      alert('parent');
  };
};

// execution
var p = new ParnentModel();
p.container.doSomething();

http://jsbin.com/arezew/1/edit