javascript - KnockoutJS "with"在模型可用之前绑定(bind)

Question

我有一个使用 KnockoutJS 的 ASP.NET MVC4 SPA Web 应用程序，这有点尴尬，因为据我了解，当页面最初在 SPA 中加载时，通常没有数据，直到 AJAX 调用检索它。当我尝试使用诸如 data-bind="with: myData" 之类的属性绑定(bind) block 内的各种数据时，该节点内的整个 DOM 都会被清空，直到 myData 变得有效，这使我如果某些脚本可能依赖于那些可用于将脚本附加到的元素或其他东西，则会感到紧张。在加载过程中页面 block 消失并重新出现看起来也很糟糕。因此，我设计了 with 绑定(bind)的变体，如果值为空，它将阻止后代绑定(bind)，目前如下所示:

ko.bindingHandlers.safeWith = {
    'init': ko.bindingHandlers.with.init,
    'update': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if ((value != undefined) && (value != null))
            ko.bindingHandlers.with.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
};

然后我只需使用 safeWith 而不是 with 来确保我的 DOM 在等待 myData 填充时不会消失。

我的问题是:

1. 这是使用 knockout 的 SPA 的常见问题吗？如果是，通常如何处理？
2. 我处理此问题的方式是否安全，或者是否存在以某种方式应用重复事件/绑定(bind)的风险，或者存在我不知道的风险？
3. 我很惊讶自己在网上漫游，了解了我从未遇到过的 knockout 和相关技术。当绑定(bind)的对象为空时，是否有充分的理由更喜欢让 DOM 部分消失？我试图保留它是不是犯了一个错误？

Answer 1

我实现了一个自定义的 bindIf 绑定(bind)处理程序，它通过推迟绑定(bind)逻辑直到可观察对象内部具有有效值来显着改善我们的结果:

ko.bindingHandlers.bindIf = {
    'init': function (element, valueAccessor) {
        return { 'controlsDescendantBindings': true };
    },
    'update': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (!$(element).data("bindIfPassed") && valueAccessor()) {
            $(element).data("bindIfPassed", true);
            ko.applyBindingsToDescendants(bindingContext, element);
        }
    }
}

应用于像这样的高级节点:

<div data-bind="bindIf: myObservable()">