在 viewModel 加载/绑定之前显示 knockoutjs 模板答案

【问题标题】：knockoutjs template displays before viewModel loads/binds在 viewModel 加载/绑定之前显示 knockoutjs 模板
【发布时间】：2014-03-17 13:41:08
【问题描述】：

我正在使用 Knockoutjs 模板。该页面加载了模板 html 显示一秒钟，然后在加载和绑定 viewModel 后，它会正确显示。处理这个问题的最佳方法是什么？目前我将模板包装在一个设置为 display: none 的 div 中，然后在应用绑定后将其删除。

【问题讨论】：

模板有knout的特定含义，听起来你的意思是页面的基本html，对吗？
不，我的意思是我的页面以
something
开头，并且在 knockoutjs 解释所有数据绑定属性和弄清楚如何显示页面。

标签： knockout.js

【解决方案1】：

将您的标记包装在脚本标签中：

<script type="text/html" id="viewModelTemplate">
... your markup ...
</script>

然后有一个顶级元素：

<div data-bind="template: {name: 'viewModelTemplate'}"/>

可以帮忙。

【讨论】：

【解决方案2】：

你什么时候绑定你的视图模型？您是从 AJAX 请求还是事件中执行此操作？如果数据在那里，页面底部的脚本标签应该在显示任何 HTML 之前运行并执行绑定。如果您需要在显示 HTML 后运行绑定，则需要使用您的方法。如果您使用的是 AJAX，我会构建视图模型，以便您绑定到空视图模型并在加载完成时设置类似 isLoaded 的属性，然后您可以绑定到它：

<div data-bind="visible: isLoaded">...</div>

【讨论】：

如果脚本标签位于页面底部，则页面将在 javascript 加载之前呈现。如果要加载的脚本数量很少，它可能看起来没有。