如何在动态添加内容中绑定knockout.js中的事件？

Question

我希望在数据绑定后向我的页面添加一些内容，例如：

 $("<li>
       <div>text</div>
       <div  data-bind='event: { click: selectContact }'></div>
    </li>")
     .appendTo($("#userClientGroup")
     .find("#searched-client-ul-UCG"));

但是，在这种情况下，click事件不起作用;任何人都可以给我解决方案吗？

Answer 1

您可以使用ko.applybindings(viewModel, $('#yourNewElement'))。请注意不要尝试绑定已绑定的元素，否则您将出错。

Answer 2

最好的方法是避免使用jQuery（或任何DOM方法）追加新元素，以避免必须将viewmodel与这些元素绑定。您可以使用HTML中的现有绑定或自定义绑定或组合来解决问题。您的绑定应该处理DOM操作，而不是其他代码（不需要知道DOM）。

另一种方法是使用委托事件处理程序。我使用以下自定义绑定：

ko.bindingHandlers.delegatedEvent = {
    init: function (element, valueAccessor) {
        var options = ko.unwrap(valueAccessor()) || {},
            setupEventHandler = function (settings) {
                if (settings.data) {
                    $(element).on(settings.event, settings.target, settings.data, settings.handler);
                } else {
                    $(element).on(settings.event, settings.target, settings.handler);
                }

                ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                    $(element).off(settings.event, settings.target, settings.handler);
                });
            };

        if ($.isArray(options)) {
            $.each(options, function () {
                setupEventHandler(this);
            });
        } else {
            setupEventHandler(options);
        }
    }
};

在你正在插入<ul>的li上使用这个：

<ul data-bind="delegatedEvent: { event: click, target: '.contact-select', handler: selectContact }">

在原始插入代码中添加类，并在那里删除数据绑定。

$('<li><div>text</div><div class="contact-select"></div></li>')
 .appendTo($("#userClientGroup").find("#searched-client-ul-UCG"));

你不仅解决了这个问题，而且只用一个替换了潜在的大量事件处理程序。