1

我有一个非常基本的应用程序，它显示有关提供的 URL 的信息

<!-- template -->
<input id=url data-bind="value: setUrl, value: url">
<div class=url-pieces data-bind="foreach: pieces">
    <h2 class=url-piece data-bind="
        text: name,
        css: { 'slide-in': $root.isValidUrl() && url() && canSlideIn() },
        style: {'transition-delay': delay}"></h2>
</div>

在 ViewModel 中，我有

self.setUrl = ko.computed(function () {
    var reverse = false;
    self.url($("#url").val());
    ko.utils.arrayForEach(self.pieces(), function (piece) {
        piece.delay(self.delay + 'ms');
        self.delay += 200;
    });
    self.delay = 0;
});

setUrl每当输入值更改时都会调用它，这会更新每个pieces（这是一个observableArray）的延迟。

我想做的只是增加每个元素的延迟，如果它的可见性状态没有改变。

也就是说，当setUrl被调用时，如果该片段的元素与之前的值相比已经有.slide-in或没有，它不应该增加延迟。.slide-in

问题是我不知道如何跟踪此状态并将其与之前的状态进行比较。这可以通过observableon来完成UrlPiece，但我只是不确定如何触发/记录状态更改。

我用我的代码创建了一个工作小提琴。

如果您键入http://example.com（出现方案/主机/路径），您可以看到问题。然后，如果你添加?foo，查询会出现，但它需要 800 毫秒（600 来自可见的，200 来自port，仍然不可见）。实际上应该没有延迟，因为方案/主机/路径/端口都没有改变状态，但我不知道什么触发器可以记录它或事后如何检查它。

欢迎任何其他改进此代码的建议，尤其是本着 Knockout 的精神。我认为这UrlsViewModel.isValidUrl是错误的，并且将 observable 传递url给每个UrlPiece人对我来说似乎也是错误的。

4

0 回答 0