0

ノックアウトjs拡張機能を使用して、ajaxリクエストからロードされた要素の上にローダーを配置して、リクエストの実行中にロード中のgifが表示されるようにしています。

フィドルは非常に基本的なものです:

  • アバターのリストをロードし、ajax リクエストの実行中にロード イメージを表示します。
  • 次に、アバターをクリックすると、その詳細が別のプレースホルダーに読み込まれ、リクエストの実行中に読み込みアイコンも表示されます。

問題は、アバターを初めてクリックしたときに、読み込みアイコンが表示されず、その後のすべてのクリックが機能することです。ここで何が欠けていますか？

ありがとう！

4

1 に答える 1

1

with表示されている問題は、 とカスタム バインディングの両方が同じ要素にあることに関連しています。値が null の場合、withバインディングは子要素をクリアします。withこれにより、ローダーが削除されます (ただし、バインディングで使用される「テンプレート」の一部として既にコピーされています) infos。それらを同じ要素に配置することは、バインディングが 2 回起動することも意味します (変更infosから 1 回、更新から 1 回) 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/

于 2013-04-25T14:19:20.870 に答える