如何在Knockout.js模板中使用jQuery？

Question

我正在尝试使用嵌入在我的剔除模板之一中的jQuery定位元素：

<script type="text/html" id="video-file-template">
    <div class="video" data-bind="attr: { 'data-index': $index }">
    </div>
</script>

但是，当我尝试使用包装在文档就绪函数中的jQuery选择$('.video') ，返回的对象长度为0：

$(document).ready(function() {
    console.log($('.video')); // Returns an object with a length of 0
});

为什么是这样？ 是因为在评估我的jQuery脚本时，该元素不属于DOM？ 如果是这样，当通过Knockout.js将元素加载到DOM中时，如何定位该元素？

Answer 1

确实，文档在ko.applyBindings完成之前就已经准备好了，所以这就是为什么您看不到元素的原因。 但是，您不应该使用jQuery违反这样的视图模型和DOM之间的边界。 在淘汰赛中，实现所需功能的方法是使用自定义绑定 。

基本上，您定义了一个新的剔除绑定（如文本，值，foreach等），并且可以访问一个init函数（该函数在首次呈现该元素时触发）和一个update函数（在将值传递给该函数时触发）。绑定已更新。 就您而言，您只需要定义init ：

ko.bindingHandlers.customVideo = {
    init: function (element) {
        console.log(element, $(element));  // notice you can use jquery here
    }
};

然后使用如下所示的绑定：

<div data-bind="customVideo"></div>

也许最好在init回调中添加“ video”类并进行其他初始化：

ko.bindingHandlers.customVideo = {
    init: function (element) {
        $(element).addClass('video');
    }
};

如果刚开始觉得有点不爽，请记住有一个很好的理由进行间接。 它将您的视图模型与所应用的DOM分开。 因此，您可以更自由地更改DOM，并且可以更独立地测试视图模型。 如果您等待ko.applyBindings完成并在此之后调用了一些jQuery东西，您将很难测试该代码。 请注意，敲除自定义绑定无论如何都不是“特殊的”，您可以看到内置绑定的定义完全相同： https : //github.com/knockout/knockout/tree/master/src/binding/defaultBindings

Answer 2

正如前面的注释所建议的，这是因为$（document）.ready在呈现淘汰模板之前就被触发了。

每当我需要做这种事情时，我倾向于在我的ko视图模型上有一个“ init”（或其他）函数，在applyBindings完成后调用该函数；

所以：

var ViewModel = function(){
     var self=this;
     //blah
     self.init = function(){
         //jquery targeting template elements
     }
}
var vm = new ViewModel();
ko.applyBindings(vm);
vm.init();