为什么afterRender上的$（元素）.offset（）。top == 0？

Question

通过afterRender，$(element).offset().top == 0进行调用时，在offset().top之后调用元素applyBindings会导致（预期）值80。

为什么第一个不是80？无论如何在afterRender中找到期望值（80）？

模板

<div data-bind="foreach: {data: entries, afterRender: render}">
    <div data-bind="text: name, attr: { 'id': name }"> </div>
</div>

的Javascript

var ViewModel = function() {
    this.entries = [
        { name: "one" },
        { name: "two"},
        { name: "three"},
        { name: "four"},
        { name: "five"}
    ];
    this.render = function(element, data) {
        if (data.name == "five")
            alert($(element).offset().top);
    }
 };

ko.applyBindings(new ViewModel());
alert($("#five").offset().top);

实施例

jsFiddle

Answer 1

看起来像你在

中提到的element

$(element).offset().top

实际上不是DOM对象，它是一个Knockout对象。除了HTML之外，它还包含一些其他数据。以下结果会产生正确的结果，因为它指的是DOM对象：

this.render = function(element, data) {
    if (data.name == "five") {
        console.log( $('#five').offset().top );
    }
}

之前我没有使用过淘汰赛，所以可能有更好的方法来访问它，但我发现你试图访问的对象实际上是在元素中，它只是对象的一个​​深度，所以以下也有效：

this.render = function(element, data) {
    if (data.name == "five") {
        console.log( $( element[1] ).offset().top );
    }
}

（请注意，我正在使用console.log进行更清晰的调试。我更喜欢不会弹出所有这些警报。）

Here's the updated fiddle