Two view models ,one for the whole page & the other for a small area


I am aware that ko.applyBindings can take a second parameter which is the DOM element that it will bind to

but my case is different i have a big page i want to specify a viewmodel for it by using ko.applyBindings(bigModel)

and then there is a small sidebar section which is in the middle of the page i want to specify another view model for it by using ko.applyBindings(smallModel, $("#sidebar")[0])

when i use bounded attributes using knockout in the small #sidebar section it throws an error Unable to parse bindings yet it still bind the values (Ex. <span 'text:propertyOnSmallModel' />) i after that tried to add these attributes as empty attributes on the bigModel , it didnt throw.

How can i apply this , use two view models one for the whole page and the other for a specific section


You can tell Knockout.js to <a href="http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html" rel="nofollow">stop binding</a> using this handler:

ko.bindingHandlers.stopBinding = { init: function () { return { controlsDescendantBindings: true }; } }; ko.virtualElements.allowedBindings.stopBinding = true;

Then using:

<!-- ko stopBinding: true --> <!-- /ko -->

html comments in your web page to stop binding.

So, you bind the bigger model to the whole page, use the above html comments to stop that model being bound on your specific section.


I don't see any problem with having child viewmodels. Add your sidebar viewmodel as a property of the parent viewmodel. Use the 'with' binding to bind the child viewmodel to your sidebar element.


  • Trying to access array offset on value of type bool
  • jaxb @XmlIDREF @XmlID work amazingly
  • Chrome Headless in Unix returns empty page source
  • MQL4, Code layout for big EA
  • Proc sql: new and continue customers based on look back period
  • Appending spaces with str_pad
  • forever does not start on server reboot [duplicate]
  • Why processBuilder in java hangs after 5 mins?
  • insert into mysql database, if records already exists, then update [duplicate]
  • Preparing an Oracle Connection after being retrieved from a ConnectionPool
  • In metro, get all inherited classes of an (abstract) class?
  • C++11: Why rvalue reference parameter implicitly converted to lvalue
  • How do I use libcurl to printf a remote FTP directory listing?
  • When to use the tag in the head and body section of a html page? [duplicate]
  • Floating parent div grows to hypothetical width of floating child div
  • How to turn off notice reporting in xampp?
  • How do I add a mouse over tooltip to an Image using .DrawImage()
  • reshape/remould data frame to create normalized bar chart and pie chart
  • How to change user identity when git pushing via ssh?
  • Google App Engine Datastore: Dealing with eventual consistency
  • read part of h5 dataset python
  • php “page caching” solution suggestions for CMS Applications
  • Update cell query for Excel ADO from Delphi
  • How to get rgb from transparent pixel in js
  • ssh remote server login script
  • Passing value from popup window to parent form's TextBox
  • How to call different template for different category archive page in woocommerce
  • How to use FirstOrDefault inside Include
  • How do I use TagLib-Sharp to write custom (PRIV) ID3 frames?
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • CAS 4 - Not able to retrieve the LDAP groups after successful authentication
  • Running R's aov() mixed effects model from Python using rpy2
  • ReferenceError: TextEncoder is not defined
  • How to check if object is null in Java?