javascript - 滚动到在绑定(bind)到 observableArray 的列表中创建的 DOM 元素

Question

我在一个元素上有一个 knockout 点击绑定(bind)。在单击处理程序内部，我将一个元素添加到绑定(bind)到 <ul> 的 observableArray。 .当一个项目被添加到这个 observableArray 时，我希望能够滚动页面，以便新添加的 <li>位于页面顶部。有什么办法吗？我的想法是获得 <li>然后使用 scrollIntoView方法，但我不知道如何从数据中获取 DOM 元素。好像我需要一些与 ko.dataFor 相反的东西.这是一个带有 TODO 的 JSFiddle，显示了我想要的内容:http://jsfiddle.net/klinden/rkLZ6/1/

Answer 1

希望这会有所帮助:

<ul data-bind="foreach: myStuff">
    <li data-bind="text: name, setFocus: {}" "></li>
</ul>

和脚本代码:

var ctr = 2;

ko.bindingHandlers.setFocus = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        $('html,body').animate({scrollTop: $(element).offset().top}, 500);
    }
};


var vm = {
    myStuff: ko.observableArray([
        {name: 'foo1', desc: 'bar1'}
    ]),
    addFooBar: function() {
        this.myStuff.push({name: 'foo' + ctr, desc: 'bar' + ctr});
        ctr++;
    }
};

ko.applyBindings(vm);