为什么 $(element).offset().top == 0 在 afterRender 上

Question

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

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

模板

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

爪哇语

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);

例

js小提琴

Answer 1

它

看起来像你所指element

$(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进行更干净的调试。我宁愿不要弹出所有这些警报。

这是更新的小提琴