Knockoutjs默认加载程序不会在第一次点击时显示

Question

我使用knockoutjs扩展将加载程序放置在从ajax请求加载的元素的顶部，以便在请求执行时显示加载gif。

的fiddle是很基本的：

• 它加载头像列表，并显示加载图像，而AJAX 请求被执行。
• 然后，当您点击一个头像时，它的详细信息 被加载到另一个占位符中，并且在请求正在执行时，加载图标也显示为 。

问题是，我第一次点击一个化身时，加载图标没有显示，但所有后续点击的作品。 我在这里错过了什么？

谢谢！

Answer 1

您看到的问题与with和您的自定义绑定在同一元素上有关。当值为null时，with绑定将清除子元素。这将删除您的加载器（虽然它已被作为with绑定所使用的“模板”的一部分被复制掉），但当您填充infos时会将其放回。让他们在相同的元素也意味着绑定从更新isAvatarLoading改变infos和触发一次两次（一次

最简单的办法解决这一问题之一就是打出像绑定：

<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading"> 
    <div data-bind="with: infos"> 
     <div data-bind="text: firstName"></div> 
     <div data-bind="text: lastName"></div> 
     <div data-bind="text: age"></div> 
     <div data-bind="text: description"></div> 
     <div style="margin-left: 55px;" id="" data-bind="with: image"> 
      <img data-bind="attr: { src: Url }" /> 
      <div data-bind="text: Description"></div> 
     </div> 
    </div> 
</div> 

如果你不希望添加其他元素，那么你可以使用无容器with语法，如：

<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading"> 
    <!-- ko with: infos --> 
     <div data-bind="text: firstName"></div> 
     <div data-bind="text: lastName"></div> 
     <div data-bind="text: age"></div> 
     <div data-bind="text: description"></div> 
     <div style="margin-left: 55px;" id="" data-bind="with: image"> 
      <img data-bind="attr: { src: Url }" /> 
      <div data-bind="text: Description"></div> 
     </div> 
    <!-- /ko --> 
</div> 

样品：http://fiddle.jshell.net/rniemeyer/75Lyn/