Knockoutjs 默认加载器在第一次点击时不显示答案

【问题标题】：Knockoutjs default loader doesn't show up on first clickKnockoutjs 默认加载器在第一次点击时不显示
【发布时间】：2013-04-25 13:39:45
【问题描述】：

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

fiddle 非常基础：

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

问题是，我第一次点击头像时，没有显示加载图标，但所有后续点击都有效。我在这里错过了什么？

谢谢！

【问题讨论】：

标签： ajax knockout.js loading loader

【解决方案1】：

您看到的问题与在同一元素上同时使用 with 和自定义绑定有关。当值为 null 时，with 绑定会清除子元素。这将删除您的加载程序（尽管它已经作为 with 绑定使用的“模板”的一部分被复制），但是当您填充 infos 时它会被放回。将它们放在同一个元素上也意味着绑定会触发两次（一次来自更改infos，一次来自更新isAvatarLoading。

解决这个问题的简单方法是拆分如下绑定：

<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/

【讨论】：