淘汰赛嵌套组成：$（文件）。就绪（）...运行之前巢组件是装 [英] Knockout nested components: $(document).ready() ... runs before nest component is loaded

问题描述

所以，我有几个嵌套淘汰赛组件：

So I have several nested knockout components:

<component1>
   <component2>
   ....
   </component2>
</component1>

COMPONENT1是我自己的分量，我写的，但COMPONENT2是第三方code，我不应该去改变它。这里的问题是：

component1 is my own component, written by me, but component2 is a third party code and I am not supposed to change it. Here is the problem:

在 $（文件）。就绪（），我使用jQuery $（'按钮'）。单击（...）来分配点击，甚至处理程序，比方说，所有的按钮，为简单起见。其结果是，只在COMPONENT1外COMPONENT2按钮得到处理，没有内部COMPONENT2按钮具有处理器（没有任何反应，当我点击他们）。

In $(document).ready(), I use jquery $('button').click(...) to assign click even handler to, say, all buttons, for simplicity. The result it, only buttons inside component1 and outside component2 get the handler, and none of the button inside component2 has the handler (nothing happens when I click on them).

需要注意的是COMPONENT2依赖于（消耗）一些Ajax调用数据，因此这可能会延缓它的加载。由于Ajax是异步，所以它可能是$（文件）。就绪（），即使运行在AJAX完成之前，因此，在 $（'按钮'）。单击（...）没赶上里面的按钮部分，因为它们还没有被渲染呢。

Note that component2 relies on (consumes) data from some ajax call, so this may delay its loading. Because ajax is async, so it's possible that $(document).ready() runs even before the ajax finishes, and therefore, the $('button').click(...) didn't catch the buttons inside components as they have not been rendered yet.

其他问题： COMPONENT1的viewmodel1似乎永远里面COMPONENT2的时候是空的。上下文是正确的;它只是空的（例如：在viewmodel1数组是空的内部COMPONENT2，不是不为空当外界COMPONENT2

Additional problem: The viewmodel1 of component1 seems to always be empty when inside component2. The context is correct; it's just empty (for example: an array of the viewmodel1 is empty inside component2, not not empty when outside component2.

如何让里面所有的按键COMPONENT2得到处理？

How to make all the buttons inside component2 get the handler?

推荐答案

如果您不能修改COMPONENT2，它不为你提供一个办法知道当它完成加载那么你唯一的选择就是循环，直到它完成负载。你可以告诉当它通过测试的一些类/ ID /等你知道的是组件内部进行加载。

If you can't modify component2 and it doesn't provide you with a way to know when it's done loading then your only option is to loop until it's done loading. You can tell when it's done loading by testing for some class/id/etc that you know is inside the component.

<component1>
   <component2>
       ...
       <div class="some-class-I-know-will-be-here"></div>
   </component2>
</component1>

var loop = window.setInterval(function () {
    if ($('.some-class-I-know-will-be-here')[0]) {
        componentHasLoaded();
        window.clearInterval(loop);
    }
}, 100);

请注意，这确实是一个黑客/解决方法。或许你也应该传递一个的onClick功能的到的这将适当地连线它的组件。

Note that this is indeed a hack/workaround. You should probably be passing an "onClick" function into the component which would wire it up appropriately.

这个解决办法是矫枉过正的简单的连接点击事件。其他答案涵盖这可怎么使用jQuery的事件代表团来完成。当你需要修改组件的模板，这个解决办法是唯一可行/视图模型，它已经创建的，你必须的没有办法修改组件的任何其他方式在的。

This workaround is overkill for simply attaching click events. The other answers cover how this can be accomplished using jQuery's event delegation. This workaround is only practical when you need to modify the component's template/viewModel after it's been created and you have no way to modify the component any other way.

这篇关于淘汰赛嵌套组成：$（文件）。就绪（）...运行之前巢组件是装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！