Question

我有一个非常基本的应用程序，显示有关提供的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与之前的值相比，那么它不应该增加延迟。

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

I have created a working fiddle with my code.

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

欢迎任何其他建议，特别是在Knockout的精神下改进此代码。我认为UrlsViewModel.isValidUrl是错误的，将可观察的url传递给每个UrlPiece似乎也是错误的。

超时后更新状态

0 个答案: