javascript - 为什么 afterRender 上 $(element).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).offset().top

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

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

我之前没有使用过knockout，所以可能有更好的访问方式，但是我发现你要访问的对象实际上是在元素中，它只是对象深处的一层，所以以下内容也适用:

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

(请注意，我使用 console.log 进行更清晰的调试。我不希望弹出所有这些警报。)

Here's the updated fiddle