knockout.js - 脚本在底部？

Question

我在页面底部包含了我的视图模型脚本并且有问题。问题是直到applyBindings被调用（也在底部）用户可以看到显示裸模板的未绑定页面一秒钟。解决方案之一是将脚本放在顶部并换行applyBindings或$()“准备好文档”。但我真的拒绝接受没有办法解决问题并将脚本保留在底部。

Answer 1

我总是使用这样的东西：

<div data-bind="visible:true" style="display:none">
    ...
</div>

Answer 2

您可以使用 CSS 隐藏有问题的元素并在之后显示它们applyBindings

CSS

.hide-while-loading { display: none }

JS

var elements = document.getElementsByClassName('hide-while-loading ');
for (var i = 0; i < elements.length; ++i) {
    // remove class:
    elements[i].className = elements[i].className.replace('/\bhide-while-loading\b/','');
}

实际上，代码删除了hide-while-loading类而不是仅仅使元素可见，因此应该隐藏的元素保持隐藏状态。

Answer 3

您可以使用 css 绑定来切换未绑定元素的可见性。

可能在包含元素上，执行以下操作：

<div data-binding="css: { notready: !isReady()}" class="notready">
  Other children with bindings
</div>

添加一个 CSS 类：

.notready { display : none; }

然后，在视图模型中添加一个新的 observable：

isReady : ko.observable(true)

当评估为时，代码切换/删除notreadyCSS 类。isReadytrue