jquery - KnockoutJS: observableArray 内の要素にプログラムでスクロールする

Question

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

上記は機能しますが、MVVMの原則に反するため、私が採用しているjQuery/data-*属性を含まない、よりクリーン/よりKnockoutJSな方法を探しています。

質問の根源は、レンダリングされたリスト/ツリー/など内の特定のオブジェクトからDOM要素を取得する方法?

ここ StackOverflow でいくつかのリソースを見つけましたが、私が見たものからこの特定の問題を解決するものはありませんでした。