Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the applyBindings' second parameter used for?

Tags:

knockout.js

I have been looking but cannot find the documentation for applyBindings(). What can the second parameter legally contain? Can it be an array of elements? Must it be a single element? Can the bindings be applied to the child elements of two separate nodes by calling applyBindings twice?

       ko.applyBindings(myViewModel, div1);        ko.applyBindings(myViewModel, div2); 
like image 993
Tim Avatar asked Sep 24 '13 19:09

Tim


People also ask

What is Ko applyBindings?

The ko. applyBindings method activates Knockout and wires up the view-model to the view. Now that we have a view-model, we can create the bindings. In Knockout.js, you do this by adding data-bind attributes to HTML elements.

Does KnockoutJS require jQuery?

KO itself doesn't depend on jQuery, but you can certainly use jQuery at the same time, and indeed that's often useful if you want things like animated transitions.

How does KnockoutJS work?

KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers build rich and responsive websites. The model separates the application's Model (stored data), View (UI) and View Model (JavaScript Representation of model).

How to include KnockoutJS in html?

It is very easy to use KnockoutJS. Simply refer the JavaScript file using <script> tag in HTML pages. A page as in the following image will be displayed. Click on download link and you will get the latest knockout.


1 Answers

KnockoutJS is open source. From the relevant file:

ko.applyBindings = function (viewModelOrBindingContext, rootNode) {     // Some code omitted for brevity...      if (rootNode && (rootNode.nodeType !== 1) && (rootNode.nodeType !== 8))         throw new Error("ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node");     rootNode = rootNode || window.document.body; // Make "rootNode" parameter optional      applyBindingsToNodeAndDescendantsInternal(getBindingContext(viewModelOrBindingContext), rootNode, true); }; 

So yes, it seems it must be a single DOM node. To be more specific, the nodeType is must be either 1 (ELEMENT_NODE) or 8 (COMMENT_NODE), otherwise an Error is thrown.

The relevant documentation ("Activating Knockout") is less explicit that it must be a DOM node, but (see emphasis, added by me) does kind of say the same thing:

Optionally, you can pass a second parameter to define which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.

As long as nodes don't share part of the tree (e.g. they're siblings) you can call applyBindings safely on each of the nodes (in fact, that's one reason to use the second argument).

See this related question for a typical use case.

like image 135
Jeroen Avatar answered Oct 25 '22 19:10

Jeroen