html - 如何将 ajax 微调器对齐到 knockoutjs 模板化的 div

Question

我正在绑定某些 html 模板。在绑定的 div 内，我有一个图像，它是 ajax 微调器。我猜这个图像永远不可见，因为它被绑定的模板覆盖。

我现在应该把这个图像放在哪里，以便它位于带有绑定模板的 div 的中心？

<div style="height: 100%; width: 100%;" data-bind="template: { name: $root.currentChildTemplate() }">
   <img src="/Content/images/ajax-loader.gif" class="ajax-loader" />
</div>

Answer 1

您可以将其包含在模板中，也可以将其放在模板之外div，并使用 CSS 绝对设置其位置。

<img src="/Content/images/ajax-loader.gif" class="ajax-loader" />
<div style="height: 100%; width: 100%;" 
     data-bind="template: { name: $root.currentChildTemplate() }"></div>

你可以更进一步，只有当某个 observable 为真时才可见。

<img src="/Content/images/ajax-loader.gif" class="ajax-loader" 
     data-bind="visible: ajaxLoading" />