0

そのため、現在、いくつかの値を表示するテーブルがあり、競合のインジケーターがあります。ユーザーがインジケーターをクリックすると、新しい div がアニメーションとともに表示され、すべての競合が一覧表示されます。

ここに私のHTMLがあります:

<span data-bind="if: hasConflict, click: $parent.selectProperty" class="conflictWarn"><i style="color: darkorange; cursor:pointer;" class="icon-warning-sign"></i></span>

データは次のようになります。

{
 name:Property 1,
 id: 1,
 hasConflicts: no,
 name:Property 2,
 id: 2,
 hasConflicts: yes,
 conflicts: {
             name: conflict1,
             name: conflict2
            }
 name:Property 3,
 id: 3,
 hasConflicts: yes,
 conflicts: {
             name: conflicta,
             name: conflictb
            }

したがって、最初のテーブルは次のようになります。

Property 1
Property 2   !
Property 3   !

どこ ！競合インジケータです。をクリックします。競合 div が表示され、どちらがクリックされたかに応じて、conflict1 と conflict2 または conflicta と conflictb も表示されます。

これが私たちが扱っているモデルです。signalr からのプロパティのマッピングのため、少し複雑です。「selectProperty」と「selectedProperty」は、どちらが競合を表示するかを示す方法でしたが、これが最善の方法であるとは確信していません。

function ItemViewModel() {
    var self = this;
    self.name = ko.observable("");
    self.itemType = ko.observable("");
    self.propertiesArray = ko.observableArray([]);
    self.properties = ko.mapping.fromJS({});
    self.selectedPropertyName = ko.observable("");
    self.getItem = function (name) {
        $.connection.mainHub.server.getItem(name).then(function (item) {
            ko.mapping.fromJS(item.properties, self.properties);
            self.propertiesArray(item.propertiesArray);
            self.itemType(item.itemType.name);
            self.name(item.name);
        });
        self.selectProperty = function (a, b) {
            self.selectedPropertyName(a);
        };
    };

}

もともとクリック イベントは、すべてのアニメーションを実行する JavaScript 関数を直接呼び出していましたが、同僚は、MVVM でデータとビューモデルを分離するためのベスト プラクティスに違反する可能性があると考えました。そうですか？「競合ポップアップ」div のコンテキストを渡すことができる「selectProperty」のビューモデル関数を呼び出したままにしておく必要がありますか? もしそうなら、javascript 関数を呼び出して、selectProperty 関数内からアニメーションを実行するだけですか?

ps これを約800回編集したので、フォローできない場合は申し訳ありません。

更新バインディングが機能するようになったので、UI アニメーションとノックアウトに関するベスト プラクティスを知りたいだけです。javascript関数からviewmodelを変更するか、viewmodel関数からjavascript関数を呼び出しますか?

4

2 に答える 2

0

「if」または「with」バインディングのレンダリング/レンダリング解除をアニメーション化する場合、カスタム バインディングは機能しません。「if」または「with」と同時に実行しようとするアニメーション バインディングは、他のバインディングが DOM を変更する前にアニメーションを完了することができず、アニメーション化されている要素がページから削除される可能性があります。イベントが完了するまでバインディング処理を延期する方法はありません。

これらのケースでは、ページに追加およびページから削除される要素をアニメーション化することが必要な場合は、「foreach」バインディングの「afterAdd」および「beforeRemove」コールバックを介してアニメーションを実装する必要があります。「if」および「with」バインディングは、「foreach」がリストの代わりに単一の引数を取ることができるため、ほとんど労力をかけずに「foreach」として書き直すことができます。アニメーションのチュートリアルが拡張され、この回避策が含まれるようになることを切に願っています。

于 2014-02-12T21:27:11.930 に答える