我正在处理图像列表。图像是动态加载的;引用列表存储在 observableArray 中。 完全加载图像列表后,我想连接 DOM 元素的处理程序。我目前的实现:
在 View 中:
<div class="carousel_container" data-bind="template: { 'name': 'photoTemplate', 'foreach': ImageInfos, 'afterRender': renderCarousel }">
<script type="text/html" id="photoTemplate">
//...content of template
</script>
在 View 模型中:
self.counterCarousel = 0;
self.renderCarousel = function (elements) {
var allImagesCount = self.ImageInfos().length;
self.counterCarousel++;
if (self.counterCarousel >= allImagesCount) {
self.counterCarousel = 0;
// ... add handlers here
}
}
这是一种非常丑陋的方法。此外,用户可以添加/删除图像,因此每次添加或删除后需要删除所有处理程序并再次连接。我如何组织自定义绑定(bind)来处理这种情况?
最佳答案
我不明白为什么这种方法行不通 -
ko.utils.arrayForEach(ImageInfos(), function (image) {
// ... add handlers here
});
或者更好的是,使用“image-info”类将事件绑定(bind)到每个项目,这样您就不必在添加或更改项目时重做绑定(bind) -
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
}
这会将事件绑定(bind)到每个类“image-info”,然后单击处理调用元素,执行 doSomething。
关于javascript - 使用 afterRender 功能实现 knockout 自定义绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18057276/