使用afterRender功能实现knockout自定义绑定

时间:2013-08-05 11:41:47

标签: javascript knockout.js

我正在使用图片列表。图像是动态加载的;引用列表存储在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>
ViewModel中的

self.counterCarousel = 0;
self.renderCarousel = function (elements) {
    var allImagesCount = self.ImageInfos().length;
    self.counterCarousel++;

    if (self.counterCarousel >= allImagesCount) {
        self.counterCarousel = 0;
        // ... add handlers here
    }
}

这是一种非常难看的方法。此外,用户可以添加/删除图像,因此需要在每次添加或删除后删除所有处理程序并再次连接。如何组织自定义绑定来处理此场景?

1 个答案:

答案 0 :(得分:0)

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

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

或者更好的是,使用“image-info”类将事件绑定到每个项目,这样您就不必在添加或更改项目时重做绑定 -

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。