我正在处理图像列表。图片是动态加载的;引用列表存储在 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>
在视图模型中:
self.counterCarousel = 0;
self.renderCarousel = function (elements) {
var allImagesCount = self.ImageInfos().length;
self.counterCarousel++;
if (self.counterCarousel >= allImagesCount) {
self.counterCarousel = 0;
// ... add handlers here
}
}
这是一种非常丑陋的做法。此外,用户可以添加/删除图像,因此每次添加或删除后都需要删除所有处理程序并重新连接。如何组织自定义绑定来处理这种情况?