Question

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

我所拥有的只是列表中的一个对象/ id，我想滚动它。

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

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上找到了一些资源，但没有一个能够从我看到的内容中解决这个问题。

KnockoutJS：以编程方式滚动到observableArray中的元素

0 个答案: