Is Yam unable to apply bindings in a knockout - is this the right approach?

Question

I have two presentation models, and I want the overlays to display one modek view - this is a Div and the other a full page

var profileModel = {
first: ko.observable("Bob"),
last: ko.observable("Smith")
 };

var shellModel = {
header: ko.observable("Administration"),
sections: ["profile", "settings", "notifications"],
selectedSection: ko.observable()
};

 ko.applyBindings(shellModel);
 ko.applyBindings(profileModel, document.getElementById("profile"));

Answer 1

Hi @Jairam, you can create an object with two views and apply bindings to the object:

 var profileModel = {
    first: ko.observable("Bob"),
    last: ko.observable("Smith")
     };

    var shellModel = {
    header: ko.observable("Administration"),
    sections: ["profile", "settings", "notifications"],
    selectedSection: ko.observable()
    };

    var viewModel = {
      subModelA: profileModel ,
      subModelB: shellModel 
    };

    ko.applyBindings(viewModel);

Answer 2

You cannot call ko.applyBindings(...)for the same parent or even a child inside the same parent.

When you call ko.applyBindings(shellModel), you bind your model to the entire DOM, and later you start other bindings in a child of the same document.

, ko.applyBindings(mergedModel), . ko.applyBindings(...) shellModel , profile.

Answer 3

You can try something like this, it looks like combining two models. Like inheritance, viewmodel2 inherits all the attributes of viewmodel1.

function viewModel1() {
  var self = this;

  self.vm1Alert = function() {
    alert('Model 1 stuff')
  };
}


function viewModel2() {
  var self = this;

  viewModel1.call(self);
  self.vm1Alert(); //from the first viewmodel
  alert('Model 2 stuff');

}
ko.applyBindings(new viewModel2());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Run codeHide result