Question

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

fiddle非常基本：

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

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

谢谢！

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

Knockoutjs默认加载器在第一次单击时不会显示

1 个答案: