1

私は画像のリストを扱っています。画像は動的にロードされます。参照のリストは 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
    }
}

これは非常に醜いアプローチです。さらに、ユーザーはイメージを追加/削除できるため、追加または削除が必要になるたびに、すべてのハンドラーを削除して再度接続します。このシナリオを処理するためにカスタム バインドを編成するにはどうすればよいですか?

4

1 に答える 1

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 が実行されます。

于 2013-08-05T12:55:58.113 に答える