Question

例如，使用knockoutjs的情况：

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

现在我想将一些复杂的行为附加到complex-element。我怎么做？我不能直接将事件附加到complex-element，因为它们是在运行时动态创建和删除的，以匹配视图模型。所以，正如我所看到的那样：

我可以用data-bind="click:..."和data-bind="mouseenter:..."来捣乱我的HTML，但如果可以，我宁愿避免这种情况。也许我太过根植于我的旧MVC方式，但添加了open()，select()或dragStart()函数以及isOpen，isSelected或{{1}我的视图模型的可观察标志只是弄得一团糟，我的直觉告诉我，随着应用程序变大，视图模型将变得无法管理。如果可能的话，我宁愿保持我的数据和演示文稿分开。

或者我可以使用jquery委托将事件附加到保持固定的事物上。类似的东西：

isDragging

但这不会起作用，因为应用程序变得更复杂，因为如果容器本身包含在仅在登录（$("#container").on('click', '.complex-element button.open', function(e) { var elem = $(e.target).parents('.complex-element'); ... });）上显示的元素中会发生什么。我不妨将所有事件绑定到身体上，这是灾难的秘诀。

我发现，提倡使用自定义敲除绑定来驱动上knockmeout.net非常凉爽文章（http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html）复杂的行为，这似乎是像自动填充或日期选择器这样的类似于小部件的行为的一个很棒的解决方案，但是只是简单的老式控制器......这会有用吗？

我想，毕竟，我的问题很简单：有没有人在一个非常大的Web应用程序上使用Knockoutjs？你是怎么做到的？

Answer 1

您可以使用不同的jquery绑定：

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

如果#container不存在，这将有效。

社区中正在进行一些工作，以使敲除绑定不引人注目且易于编写。目前，淘汰赛为您提供了dataFor()，可以在此处查看：Using unobtrusive event handlers或者您可以使用这样的小型图书馆：Introducing the Knockout.Unobtrusive Plugin

Answer 2

如果你需要在foreach的某些渲染元素上执行一些任意的js，你可以使用afterAdd回调

<div id="container" data-bind="foreach: { data: containers, 
               afterAdd: somefunction }">
    <li class="complex-element">...</li>
</div>

我在一个非常大的网络应用程序上使用过KO，而我在管理复杂性的方式是

在单个主命名空间中将视图模型拆分为单独的使用命名空间。
为复杂的可重用行为编写自定义绑定。
创建的实体模型类，它封装了大部分重要的业务逻辑，类似于主干模型。
确保viewModel完全是视图特定的并且与视图相关（由第3点帮助）
将所有jquery选择器保持在最低限度，我觉得写任何全局代表都很脏，但有时候需要它们。

希望这有帮助。

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

2 个答案: