实现基于afterRender功能的敲除自定义绑定

我正在处理图像列表。图像被动态加载;引用列表存储在observableArray中。完成图像列表的加载后，我想连接DOM元素的处理程序。我此刻的实现：实现基于afterRender功能的敲除自定义绑定

在查看

：

<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 
    } 
}

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

来源

2013-08-05 rakhmanoff

我不明白为什么这种方法是行不通的 -

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 
}

此结合事件的每一个类的图像信息'和点击处理呼叫元素，执行DoSomething的。

来源

2013-08-05 12:55:58

实现基于afterRender功能的敲除自定义绑定

回答

相关问题