Question

我在页面底部包含了我的viewmodel脚本并遇到了问题。问题是在调用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)

当notready评估为isReady时，代码会切换/删除true CSS类。

脚本在底部？

3 个答案: