javascript - 将行为附加到由knockoutjs创建的元素

Question

以使用knockoutjs的情况为例:

<div id="container" data-bind="foreach:containers">
    <li class="complex-element">...</li>
</div>

现在我想将一些复杂的行为附加到 complex-element 。我怎么做？我不能直接将事件附加到复杂元素，因为它们是在运行时动态创建和删除的，以匹配 View 模型。所以，据我所知:

我可以用data-bind="click:..."来猜我的html和 data-bind="mouseenter:..."但如果可以的话我宁愿避免这种情况。也许我太 Root 于我的旧 MVC 方式，但添加 open() , select() ，或dragStart()功能和isOpen , isSelected或isDragging我的 View 模型的可观察标志只会造成困惑，我的直觉告诉我，随着应用程序变得越来越大， View 模型将变得难以管理。如果可能的话，我宁愿将数据和演示文稿分开。

或者我可以使用 jquery 委托(delegate)将事件附加到保持固定的事物上。像这样的东西:

$("#container").on('click', '.complex-element button.open', function(e) {
    var elem = $(e.target).parents('.complex-element');
    ...
});

但是，随着应用程序变得更加复杂，这将不起作用，因为如果容器本身包装在仅在登录时显示的元素中( <div id="wrapper" data-bind="if:isLoggedIn">...</div> )，会发生什么情况。我还不如将所有事件绑定(bind)到主体，这会导致灾难。

我在 Knockmeout.net (http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html) 上发现了一篇非常酷的文章，该文章提倡使用自定义 knockout 绑定(bind)来驱动复杂的行为，这似乎是一个很棒的解决方案，适用于自动完成或日期选择器等类似小部件的行为，但是如果只是简单的老式 Controller 呢......这会起作用吗？

我想，毕竟，我的问题非常简单:有人在大型 Web 应用程序上使用过 Knockoutjs 吗？你是怎么做的？

Answer 1

您可以使用不同的 jquery 绑定(bind):

$(document).on('click', '#container>.complex-element button.open', function(e) {
    var elem = $(e.target).parents('.complex-element');
    ...
});

如果#container不存在，这将起作用。

社区正在进行一些工作，以使 knockout 绑定(bind)不引人注目且易于编写。目前，knockout 为您提供了 dataFor()，可以在此处看到:Using unobtrusive event handlers或者你可以使用像这样的小库:Introducing the Knockout.Unobtrusive Plugin