使用 jQuery 对象作为节点参数的多个模型绑定答案

【问题标题】：Multiple model bindings using jQuery objects as the node argument使用 jQuery 对象作为节点参数的多个模型绑定
【发布时间】：2015-08-07 02:13:50
【问题描述】：

Knockout 可以通过以下代码绑定到多个模型：

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

我想知道我们是否可以像这样使用jQuery来引用div：

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

如果我使用 jQuery 来引用 div 并将其作为第二个参数传递，上述模型绑定会起作用吗？

【问题讨论】：

$('#firstDiv').get(0) 与 document.getElementByID('firstDiv') 相同。如果这可以帮助。但是 document.getElementByID 更快！
为什么是 $('#firstDiv').get(0) ??为什么我需要像数组get（0）一样写。当我们编写 jquery 时，我们通过 id 访问任何元素，那么为什么这种语法 $("#firstDiv") 不起作用？寻求更多帮助来理解。
当然。当您执行 $('#firstDiv') 时，jQuery 将自身包裹在选择器指向的元素上。所以你没有一个 DOM 对象，而是一个 jQuery 对象。为了获取 DOM 对象， .get(0) 做到了。 $('#firstDiv')[0] 也是如此，但这并不漂亮;) 所以我们只是说你需要调用的方法需要一个 DOM 元素，而这不是 jQuery 选择器返回的内容

标签： jquery knockout.js

【解决方案1】：

Knockout 是开源的，因此您可以轻松地检查自己是否以及如何工作。看看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);
};

所以，第二个参数必须是一个实际的节点（元素或注释）。仅仅转储一个 jQuery 对象很可能是行不通的。如果您使用 jQuery，您需要解开从 $(selector) 方法返回的 jQuery 对象，例如通过采取第一项。像这样：

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>

这里是another answer I wrote，还有更多关于ko.applyBindings'第二个参数的细节。

PS。如果您要问“以下工作是否可行”的问题，那么尝试会不会更快，信息更丰富？

【讨论】：