Question

我正在快速更新已排序的Knockout数组的内容，并发现我实际上无法与快速更新的项目进行交互。这是一个非常简化的例子：

<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('...')允许我点击该项目上的链接，但我也想支持重新排序。

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

在Knockout中有没有简单的方法呢？是否有任何现有的插件可以做到这一点？

Answer 1

根据observableArray链接创建一个计算器。当鼠标位于button时，计算机将返回悬停开始时的副本;当鼠标不在ul中时，computed会返回当前的链接列表。

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

推迟重新排序快速更新的Knockout阵列元素

1 个答案: