Multiple model bindings using jQuery objects as the node argument

Question

Knockout can bind to multiple models with below code:

ko.applyBindings(MyFirstKOModel, document.getElementByID(‘firstDiv’));

I'd like to know if can we use jQuery to refer to the div like this:

ko.applyBindings(MyFirstKOModel, $("#firstDiv"));

Would the above model binding would work if I use jQuery to refer to the div and passing that as the second argument?

$('#firstDiv').get(0) is the same as document.getElementByID('firstDiv'). If that can help. But document.getElementByID is WAY faster! — Bene, May 25 '15 at 15:02
why $('#firstDiv').get(0) ?? why do i need to write like array get(0). when we write jquery then we access any element by id then why this syntax `$("#firstDiv")` will not work ? looking for more help to understand. — Mou, May 25 '15 at 15:16
Sure. When you do $('#firstDiv'), jQuery WRAPS ITSELF over the element pointed by the selector. So you don't have a DOM object, but a jQuery object. In order to get the DOM object, .get(0) does it. So does $('#firstDiv')[0], but this is not pretty ;) So let's just say the method you need to call requires a DOM element, and that's just not what the jQuery selector is returning — Bene, May 25 '15 at 15:21

score 1 · Accepted Answer · edited May 23 '17 at 10:26

Knockout is open source, so you can easily check yourself if and how this may work. Take a look at the applyBindings declaration for version 3.3.0:

ko.applyBindings = function (viewModelOrBindingContext, rootNode) {
    // If jQuery is loaded after Knockout, we won't initially have access to it. So save it here.
    if (!jQueryInstance && window['jQuery']) {
        jQueryInstance = window['jQuery'];
    }

    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, the second argument must be an actual node (element or comment). Just dumping in a jQuery object will most likely not work. If you use jQuery, you'll need to unwrap the jQuery object returned from the $(selector) method, e.g. by taking the first item. Like this:

var jqueryResult = $('#root1');
var node = jqueryResult[0];
ko.applyBindings({myTxt:'testing123'}, node);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="root1"><span data-bind="text: myTxt"></span></div>

Here's another answer I wrote, with some more details about ko.applyBindings' second argument.

PS. If you're asking a "would the following work" question, wouldn't just trying it be quicker and more informative?

Multiple model bindings using jQuery objects as the node argument

1 Answers1