延迟 Knockout 的可见绑定？

Question

我有一个购物车。当它为空时，我想显示一个带有“空”消息的 div。当其中有项目时，我想显示一个包含项目的 div。目前，我有这样的东西......

<div style="display: none" data-bind="visible: items().length == 0">Empty</div>
<div style="display: none" data-bind="visible: items().length > 0">Not Empty</div>

...还有这个...

function ViewModel() {
    var self = this;

    self.items = ko.observableArray([]);
};

现在，我正在使用 AJAX 加载商品，这意味着对于购物车中是否有商品存在一个初始阶段的不确定性。这意味着页面从显示“空”div 开始，然后很快，在看到有项目后，将其替换为“非空”div——这个过程在屏幕上看起来很笨重。

如何在我的 AJAX 完成并且我知道项目数之前暂停 div 上的 visible 函数？

我想到的一件事（看到工作here）是创建一个单独的属性showEmpty...

<div style="display: none" data-bind="visible: showEmpty">Empty</div>
<div style="display: none" data-bind="visible: items().length > 0">Not Empty</div>

...并默认将其设置为undefined。这意味着 visible 在定义 showEmpty 之前不会解析。然后我在 AJAX 调用中定义它...

self.items = ko.observableArray([]);
self.showEmpty = ko.observable(undefined);

// Fake AJAX
setTimeout(function() {
    self.items([1]);        
    self.showEmpty(self.items().length == 0);
}, 2000);

这 100% 有效，但它提出了一个新问题：我现在 手动 更新一个 observable。如下所示，当我想在数组中添加或删除项目时，这些函数现在必须担心更新showEmpty 属性。

self.addItem = function() {
    self.items.push(1);
    self.showEmpty(false);
};

self.removeItem = function() {
    self.items.pop();
    self.showEmpty(self.items().length == 0);
};

我觉得 KO 的全部目的是避免这种事情。那么，我想要的是某种方法来设置 only 对 div 的 visible 函数的分辨率的初始延迟。在最初的等待之后，我希望 visible 函数根据可观察数​​组的 .length 进行更新。

谢谢！

Answer 1

@pquest 在评论中为我提供了解决方案，因此我将其详细放在此处以供其他人稍后查看。

从我更新的fiddle 中可以看出，我添加了一个loadingDone 可观察对象，并在visible 绑定中包含了对它的引用...

<div style="display: none" data-bind="visible: items().length == 0 && loadingDone">Empty</div>
<div style="display: none" data-bind="visible: items().length > 0">Not Empty</div>

在我的脚本中，我能够删除所有手动更新...

function ViewModel() {
    var self = this;    

    self.items = ko.observableArray([]);
    self.loadingDone = ko.observable(false);

    // Fake AJAX
    setTimeout(function() {
        self.items([1]);        
        self.loadingDone(true);
    }, 2000);

    self.addItem = function() {
        self.items.push(1);
    };

    self.removeItem = function() {
        self.items.pop();
    };
};

不错！我仍然希望我可以在不添加额外的 observable 的情况下完成相同的操作，但这比我拥有的要好得多，所以我很高兴。

Answer 2

（没有足够的代表发表评论，抱歉）除非您绝对必须使用淘汰赛来提高知名度，否则为什么不使用 jQuery 来代替使用 .show() 和 .hide() 函数来处理 AJAX 中的 div .在 AJAX 调用结束时检查可观察的项目长度，如果它大于 0，请检查 .show()，否则它会保持隐藏状态..（除非你需要那里的“空”消息）

Answer 3

如果您不想添加 observable，可以将 setTimeout 移到 viewModel 之外，然后从那里调用 ViewModel 中的 ajax 函数。

var ViewModel = function() {
    // other code

    self.fake_ajax = function() {
    };
}

var vm = new ViewModel()
ko.applyBindings(vm);

setTimeout(function() {
    vm.fake_ajax();
}, 3000);

这是fiddle。