Javascript 使用afterRender功能实现淘汰自定义绑定

我正在处理一个图像列表。动态加载图像；引用列表存储在observableArray中。 在完整加载图像列表之后，我想连接DOM元素的处理程序。我目前的执行情况：

鉴于：

<div class="carousel_container" data-bind="template: { 'name': 'photoTemplate', 'foreach': ImageInfos, 'afterRender': renderCarousel }">
<script type="text/html" id="photoTemplate">
//...content of template
</script>

---

这是一个非常丑陋的方法。此外，用户可以添加/删除图像，因此在每次添加或删除图像后，都需要删除所有处理程序并再次连接。我如何组织自定义绑定来处理这种情况？

我不明白为什么这种方法不起作用-

ko.utils.arrayForEach(ImageInfos(), function (image) {
    // ... add handlers here
});

或者更好的方法是，使用“图像信息”类将事件绑定到每个项目，这样在添加或更改项目时就不必重新进行绑定-

var afterRender = function (view) {
    bindEventToImages(view, '.image-info', doSomething);
};

var bindEventToImages= function (rootSelector, selector, callback, eventName) {
    var eName = eventName || 'click';
    $(rootSelector).on(eName, selector, function () {
        var selectedImage = ko.dataFor(this);
        callback(selectedImage);
        return false;
    });
};

function doSomething(sender) {
    alert(sender);
    // handlers go here
}

这会将一个事件绑定到每个类“image info”，并在单击时处理调用元素，执行doSomething

var afterRender = function (view) {
    bindEventToImages(view, '.image-info', doSomething);
};

var bindEventToImages= function (rootSelector, selector, callback, eventName) {
    var eName = eventName || 'click';
    $(rootSelector).on(eName, selector, function () {
        var selectedImage = ko.dataFor(this);
        callback(selectedImage);
        return false;
    });
};

function doSomething(sender) {
    alert(sender);
    // handlers go here
}