knockout.js - knockout deferUpdates 与 'if' 绑定(bind)冲突

Question

我经常使用if在 knockout 中绑定(bind)以隐藏某些内容，另外我不需要担心 if 中的空引用错误。 .在本例中，如果 address()为 null 则删除整个 block ，这样您就不必处理每个属性的 null 检查。如果我使用了 visible，情况就不会如此。捆绑。

<div data-bind="if: address()">
    You live at:
    <p data-bind="text: address().street.toUpperCase()"></p>            
</div>

这是上面最简单的情况 - 是的，我通常会将此模式与 <!-- ko --> 一起使用注释语法。

真正引起我问题的是当我使用更复杂的 computed值并启用 ko.options.deferUpdates选项 :

<div data-bind="if: hasAddress()">
    You live at:
    <p data-bind="text: address().street.toUpperCase()"></p>            
</div>

computed 的最简单实现observable 可能是这样的:

this.hasAddress = ko.computed(function () { return _this.address() != null; }); 

在我执行以下操作之前，这一切都很好:

1) set ko.options.deferUpdates = true before creating the observables.

2) address() will start off as null and everything is fine

3) set address() to { street: '123 My Street' }. Again everything works fine.

4) reset address() to null. I get a null error because address().street is null :-(

Here is a fiddle to illustrate the problem : https://jsfiddle.net/g5gvfb7x/2/

不幸的是，由于微任务运行的顺序，它似乎试图重新计算 text在 if 之前绑定(bind)绑定(bind)，所以你仍然会得到一个通常不会发生的空错误。

我对此有点害怕，因为我经常使用这种模式:-(

Answer 1

使用 deferUpdates 时, Knockout 内部使用 dirty事件通知所有计算的可观察对象它们的依赖关系发生变化并安排更新，这以深度优先的顺序发生。出现这里的问题是因为绑定(bind)忽略了 dirty事件并等待 change事件，它将以广度优先的顺序发生。

修复必须在 Knockout 中进行，以使绑定(bind)响应 dirty事件。这已经在即将发布的版本 (3.5.0) 中 checkin :https://github.com/knockout/knockout/issues/2226