推迟重新排序快速更新淘汰赛数组元素

Question

我迅速更新排序淘汰赛数组的内容，发现我不能真正与快速更新的项目进行交互。这里有一个很简单的例子：

<script type="text/html" id="link-template"> 
    <a data-bind="text: name" href="https://stackoverflow.com"></a> 
</script> 

<ul data-bind="template: { name: 'link-template', foreach: links }"></ul> 

<script> 
    var Link = function(name) { 
     this.name = ko.observable(name); 
    }; 

    var Vm = function() { 
     this.links = ko.observableArray(); 
    }; 

    var model = new Vm(); 
    model.links.push(new Link('link1')); 
    model.links.push(new Link('link2')); 
    ko.applyBindings(model); 

    setInterval(function() { 
     var len = model.links().length; 
     var target = Math.floor(Math.random() * len); 
     var removed = model.links.splice(target, 1); 
     model.links.unshift(removed[0]); 
    }, 1000/30); 
</script> 

我的意图是订购最近更新的链接，这里随机更新嘲笑。直接更新，model.links()[0].name('...')，请允许我按一下该项目的联系，但我也想支持重新排序。

试图与快速更新的数组进行交互是一个非常糟糕的用户体验，所以我认为最好的解决方案是推迟重新排列列表中的元素，直到用户不再徘徊在它上面为止，将显示的数组与数据数组更多。其他列表元素仍然应该在固定的活动元素周围进行重新排序。

有没有简单的方法在淘汰赛做到这一点？有没有现成的插件可以做到这一点？

Answer 1

创建一个基于链接的observableArray计算。当鼠标处于ul，计算出返回在悬停开始时制作的复制品。当鼠标不在ul，计算返回的链接当前列表。

var Link = function(name) { 
 
     this.name = ko.observable(name); 
 
    }; 
 

 
    var allowReorder = ko.observable(true); 
 

 
    var model = { 
 
     links: ko.observableArray([ 
 
     new Link('link1'), 
 
     new Link('link2') 
 
     ]), 
 
     allowReorder: ko.observable(true) 
 
    }; 
 

 
    var copyOfLinks; 
 
    model.allowReorder.subscribe(function(newValue) { 
 
     if (!newValue) { 
 
     copyOfLinks = model.links.slice(0); 
 
     } 
 
    }); 
 

 
    model.computedLinks = ko.computed(function() { 
 
     if (model.allowReorder()) { 
 
     return model.links() 
 
     } else { 
 
     return copyOfLinks; 
 
     } 
 
    }); 
 

 
    ko.applyBindings(model); 
 

 
    setInterval(function() { 
 
     var len = model.links().length; 
 
     var target = Math.floor(Math.random() * len); 
 
     var removed = model.links.splice(target, 1); 
 
     model.links.unshift(removed[0]); 
 
    }, 50);

<div>Something</div> 
 
<ul data-bind="foreach: computedLinks, event: {mouseover:allowReorder.bind(null, false), mouseout:allowReorder.bind(null, true)}"> 
 
    <li> 
 
    <a data-bind="text: name" href="https://stackoverflow.com"></a> 
 
    </li> 
 
</ul> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>