2

我正在尝试在 KnockoutJS 中找到一种滚动到列表项（或任何相关内容）的方法。

我所拥有的只是列表中的一个对象/ID，我希望滚动到该列表。

我已经将我试图在下面实现的功能（和简化）版本放在一起。

演示：http: //jsfiddle.net/qczdvkat/

JavaScript：

function ViewModel()
{
    var self = this;

    self.items = ko.observableArray([]);

    for(i = 0 ;i < 150; i++)
    {
        self.items.push({id: i, title: 'Item No. ' + i});
    }

    self.scrollToItem = function() {
        console.log('Scrolling to item 125...');
        $('ul').scrollTop($('ul [data-id="' + 125 + '"]').position().top - $('ul li:first').position().top);
    };
}

$(function() {
    ko.applyBindings(new ViewModel());
});

HTML：

<ul data-bind="foreach: items">
    <li data-bind="text: title, attr: {'data-id': id}">
    </li>
</ul>
<button data-bind="click: scrollToItem">Scroll to Item No. 125</button>

CSS：

ul
{
    max-height: 150px;
    overflow-y: scroll;
    border: 1px solid #000;
}

虽然上述方法有效，但我正在寻找一种更清洁/更多 KnockoutJS并且不涉及我正在使用的 jQuery/data-* 属性的方法 - 因为它违反了 MVVM 原则。

我想问题的根源归结为：如何从渲染列表/树/等中的特定对象获取 DOM 元素？

虽然我在 StackOverflow 上找到了一些资源，但我所看到的都没有解决这个特定的问题。

4

0 回答 0