如何在Knockout.js模板中使用jQuery？ [英] How to use jQuery in a Knockout.js Template?

问题描述

I'm trying to target an element using jQuery which is embedded in one of my knockout templates:

我正在尝试使用嵌入我的一个敲门模板中的jQuery来定位一个元素type =text / htmlid =video-file-template>
< div class =videodata-bind =attr：{'data-index'：$ index}>
< / div>
< / script>

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

但是，当我尝试选择 $（'。video'）使用jQuery，包装在一个文档就绪函数中，我得到一个长度为0的对象返回：

Yet, when I attempt to select $('.video') using jQuery, wrapped in a document ready function, I get an object with a length of 0 returned:

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

为什么会这样？是因为当我的jQuery脚本被评估时，元素不是DOM的一部分？如果是这样，当通过Knockout.js加载到DOM中时，我如何定位元素？

Why is this? Is it because the element is not part of the DOM when my jQuery script is evaluated? If so, how can I target the element when it is loaded into the DOM via Knockout.js?

推荐答案

文件在 ko.applyBindings 完成之前已经准备好了，所以这就是为什么你看不到元素。但是，您不应该使用jQuery来违反视图模型和DOM之间的边界。在淘汰赛中，完成所需要的方式是自定义绑定。

It's true that the document is ready before ko.applyBindings finishes, so that's why you're not seeing the element. However, you should not be using jQuery to violate the boundary between your view model and the DOM like that. In knockout, the way to accomplish what you need is with custom bindings.

基本上，您定义一个新的敲除绑定（如文本，值，foreach等），并且您可以访问 init 函数，该函数在元素被首先渲染，并且$ code>更新函数，当您传递给绑定的值被更新时触发。在您的情况下，您只需要定义 init ：

Basically, you define a new knockout binding (like text, value, foreach, etc) and you have access to an init function, which fires when the element is first rendered, and an update function, which fires when the value you pass to the binding is updated. In your case, you would only need to define init:

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

然后你使用这样的绑定：

And then you use the binding like this:

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

也许最好在init回调中添加视频类并执行其他初始化： / p>

Perhaps it's better to add the "video" class and do other initialization right in the init callback:

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

如果这首先感觉有点笨，记住有一个非常好的间接原因。它使您的视图模型与其适用的DOM分离。因此，您可以更自由地更改DOM，您可以更独立地测试视图模型。如果您等待 ko.applyBindings 完成并调用了一些jQuery的东西，那么您将更难测试该代码。请注意，敲除自定义绑定以任何方式不是特殊，您可以看到内置绑定的定义完全相同： https://github.com/knockout/knockout/tree/master/src/binding/defaultBindings

If this feels a little wonky at first, remember there's a very good reason for the indirection. It keeps your view model separate from the DOM it applies to. So you can change the DOM more freely and you can test the view model more independently. If you waited for ko.applyBindings to finish and called some jQuery stuff after that, you'd have a harder time testing that code. Notice that knockout custom bindings are not "special" in any way, and you can see that the built in bindings are defined exactly the same: https://github.com/knockout/knockout/tree/master/src/binding/defaultBindings

这篇关于如何在Knockout.js模板中使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！