1

我有一个<ul>填充有foreach绑定的元素。<ul>随着嵌入它的模板被重新渲染，这反过来又在不同的时间重新创建。这工作正常。

然而，在某些情况下，我想在此列表中添加额外的行为（例如，记录滚动事件）在 knockoutjs 之外。我不希望这段代码成为绑定的一部分，因为它只是有条件地注入（例如，在运行实验时）。我以为我可以做类似的事情

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

在我的 DOM 初始化之后，但这不起作用，因为knockoutjs绑定替换了我绑定滚动事件的元素。是否有等效.live()于滚动的 a ？或者，是否有另一种方法可以将我的事件处理程序动态注入不依赖于静态编码属性的淘汰绑定机制？

编辑：2012 年 8 月 7 日下午 5:41：我尝试使用该delegate()方法，但无法弄清楚如何指定选择器以找到我的深度嵌套ul。

编辑：2012 年 8 月 7 日下午 6:31：我正在使用 jquery 1.4.4 并在 Chrome 中进行测试。

4

4 回答 4

2

我最终实现了以下模式：

在我的模板中：

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

在我的视图模型中：

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

在我的条件代码中：

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

不像我想要的那样解耦，但比显式引用更好。

于 2012-08-08T01:49:14.417 回答
1

您可以尝试将事件处理委托给敲除不会弄乱的静态容器。在最顶层，所选容器可以是document.

.live()自 jQuery 1.7.1 起已弃用，但使用on().

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

有了这个，任何<ul class="doclist">元素都将具有日志记录操作，无论它是在附加处理程序时到位，还是稍后到位。

我承认我从来不需要委派scroll，但原则上这应该有效，提供一个“滚动”事件实际发生（编辑 - 并且它冒泡）。

编辑

以下是等效的：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

因此，上面的表达式将转换为：

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

如果可能，请替换document为更多本地化容器的选择器。

于 2012-08-08T00:49:30.943 回答
1

从quirksmode看来，“滚动”事件没有冒泡，所以我认为事件委托不会起作用。

您可以使用 foreach 绑定的淘汰“afterAdd”和“afterRender”回调（在foreach 文档页面的注释 5 中记录）根据您是否要进行日志记录有条件地绑定到滚动事件。

于 2012-08-08T01:24:38.957 回答
0

如果要进行委托注册，请选择一个始终存在的元素（我将body在示例中使用，但请选择最接近目标元素的元素）并执行以下操作：

$( "body" ).on( 'scroll', 'ul.doclist', handler );

对于 jQuery 1.4.4

$( "body" ).delegate( 'ul.doclist', 'scroll', handler );
于 2012-08-08T00:49:58.967 回答