Question

I have a <ul> element which is populated with a foreach binding. This <ul> is in turn re-created at different times as the template in which it is embedded is re-rendered. This works fine.

In some cases, however, I would like to add additional behavior to this list (e.g., to log scrolling events) outside of knockoutjs. I don’t want this code to be part of the binding because it is only injected conditionally (e.g., when running experiments). I thought I could do something like

$('ul.doclist').scroll(function() { 
    // log scrolling here
});

after my DOM is initialized, but that doesn’t work because knockoutjs bindings replace the element to which I am binding the scroll event. Is there an equivalent of a .live() for scrolling? Alternatively, is there another way I can dynamically inject my event handler into the knockout binding mechanism that does not rely on the statically-coded attribute?

EDIT: 7 Aug 2012 5:41 pm: I tried using the delegate() method but cannot figure out how to specify the selector to find my deeply-nested ul.

EDIT: 7 Aug 2012 6:31 pm: I am using jquery 1.4.4 and testing in Chrome at the moment.

Answer 1

I wound up implementing the following pattern:

In my template:

<ul class="doclist" data-bind='foreach: rows, event: {scroll: window.viewModel.notifyOfScrollEvent}'>
</ul>

in my view model:

this.documentScrolled = ko.observable();
this.notifyOfScrollEvent = function() {
    self.documentScrolled.valueHasMutated();
}

in my conditional code:

viewModel.documentScrolled.subscribe(function() {
    console.log('scrolling');
});

Not as de-coupled as I’d like, but better than an explicit reference.