3

ノックアウト バインディングの値を強制的に更新する方法を知りたいです。通常はオブザーバブルを使用し、オブザーバブルが変更されたときにバインディングが自動的に行われるようにします。しかし、私の場合、カスタム バインディングを作成しました。

if (!ko.bindingHandlers.asyncHtml) {
ko.bindingHandlers.asyncHtml = {
    init: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var parameters = value.params.concat([function (data) {
            $(element).html(data);
        } ]);

        parameters.concat([function (data) {
            $(element).html('Unable to retrieve html.');
        } ]);
        value.source.apply(null, parameters);
    }
}
}

これは、非同期の JSON 呼び出しを実行する関数が、呼び出しの完了後にそれぞれの要素を (返された HTML で) 更新できるようにするためです。要素 (この場合は DIV) は次のようになります。

<div id="myDiv" data-bind="asyncHtml: {source: getHtml, params: [myId()]}">

私の問題は、このページの別の機能が、結果としてmyDivを更新する必要があるデータベースの値を変更できることです。おそらくこの問題を修正する複雑な方法を見つけることができますが、バインディングを強制的に再適用できる簡単な方法があるかどうか疑問に思っていましたか?

注: getHtml は、HTML を取得するために JSON 呼び出しを実行するビューモデルの関数です。

ありがとう

4

2 に答える 2

3

あなたが達成しようとしていることを正しく理解できたと思いますが、よくわかりません。あなたの目的をどのように理解しているかを説明させてください.

  1. サーバーから最初の HTML を取得する div (#myDiv) があります。

  2. この html を取得する ajax 関数 (getHtml) があり、onSuccess によって #myDiv が更新される可能性があります。

    $('#myDiv').html(serverResponseHTMLContent);

  3. 次に、サーバーで生成された html に取って代わる別の HTML を生成する別の関数があります。

これがすべて正しい場合は、ノックアウトの html バインディングを使用することをお勧めします。

あなたのdivはそのようになります。

<div id="myDiv" data-bind="html: myDivInnerHtml">

myDivInnerHtml は、viewModel の一部であり、あなたが普段言っているように観察可能である必要があります。最初のバインドの前に、getHtml を呼び出して、実際に myDiv の html を設定する代わりに、myDivInnerHtml の値を設定します。

myDivInnerHtml = ko.observable(serverHtmlString);

次に、バインディングを適用すると、myDiv の内部 Html がノックアウトによって設定されます。HTML を更新するには、クライアント側関数で myDivInnerHtml の値を変更できます。

myDivInnerHtml(clientSideFunctionHtmlString);

私の仮定が間違っていて、同じ html を別の値で再作成した場合は、可能であればテンプレートを使用する必要があり、サーバーは html を送信するのではなく、値を html にバインドする必要があります。

また、クライアント側の関数が html を作成するのではなく、値を html にバインドする場合、これも機能しません。

于 2012-06-20T09:25:36.157 に答える
2

valueHasMutated()オブザーバブルを再評価する必要があることをサブスクライバーに通知する関数を見ることができます。

オブザーバブルから自動的にトリガーせずにビューを強制的に更新する方法を参照してください。もう少し説明が必要です。

于 2012-06-15T12:09:40.080 に答える