1

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.

1
  • I'm happy to have helped. You can accept the answer if you feel like doing so.
    – Stefan
    Dec 12, 2012 at 8:24

2 Answers 2

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

0
0

I think you should create instance of contained model when passing to ContainerModel like this :

self.container = new ContainerModel(self, new containedViewModel, 'modelName');
2
  • Passing the viewModel in defeats the purpose of the Container. I need to pass a constructor into the container to allow me to create models within the container, and arrays of viewModels after the container has been constructed. If you pass the viewModel in the 'new' allocation will complain about not having a constructor. The problem is that objects constructed with the passed constructor cannot be used to access viewModel functions. Dec 12, 2012 at 7:49
  • If I pass both the constructor and a view model into the container like ... containedViewModel(self, containedViewModel, new containedViewModel, 'name') I can use the constructor to create new models, and I can use the view model to access the functions, what baffles me is why I cannot access functions using models created using the constructor in the container. Dec 12, 2012 at 8:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.