0

サーバー上のモデルに変更があったときに、SignalR と Knockout.js を使用してビューに動きを表示しています。

エンティティ用の非常に単純な ViewModel があります (これは、サーバー側で "移動" すると画面上を "移動" する小さな赤い四角形です):

function Entity(data) {
    var self = this;
    self.id = data.UID;
    self.left = ko.observable(data.Left);
    self.top = ko.observable(data.Top);
}

私の HTML のノックアウト テンプレートは次のとおりです (私の CSS クラス エンティティが絶対位置を割り当てることに注意してください)。

<!-- ko foreach: entities -->
    <div data-bind="attr: { id: 'ent' + id }, style: { top: (top() + 'px'), left: (left() + 'px')}" class="entity">
    </div>
<!-- /ko -->

したがって、サーバー上のモデル (この場合は Location プロパティ) が変更されると、SignalR の RPC 機能を使用して、個々のエンティティごとに関連する ViewModel を更新します。これは私の CSSleftで期待どおりに機能topし、ViewModel の変更に従って自動的に更新されますが、見栄えがよくスムーズに見えるようにしたいと考えています。

Knockout を使用して ViewModel にバインドされた jQuery アニメーションをオンラインおよび SO で検索しても、fadeIn/fadeOut 可視性アニメーションのみが実際に表示されますが、キャンバス全体で「動き」を本質的に表示したいのです。似たようなことをして成功した人はいますか？

4

3 に答える 3

2

組み込みのノックアウト バインディングを使用して上と左の位置を直接設定するのではなく、独自のカスタム バインディングを作成できます。

html は次のようになります。

<!-- ko foreach: entities -->
  <div data-bind="attr: {id: 'ent' + id }, moveable: { top: top(), left: left()">
  </div>
<!-- /ko -->

次に、カスタム バインディング (上記の例では moveable という名前) に対して、バインディングの update 関数に jQuery トランジションを追加するように記述できます。おおよそ次のようになります。

update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var values = valueAccessor();
    $(element).animate({top: values.top() + 'px', left: values.left() + 'px'}, 1);
}

後で、必要に応じてカスタム バインドに高度なオプションとロジックを追加できます。カスタム バインディングの詳細については、 http : //knockoutjs.com/documentation/custom-bindings.htmlを参照してください。

于 2013-10-28T17:28:40.517 に答える
1

エンティティを次のように変更できます 

function Entity(data) {
    var self = this;
    self.id = data.UID;
    self.position = ko.observable({left: data.Left, top : data.Top});
}

このカスタムバインディングを使用します 

ko.bindingHandlers.animate = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
       $(element).animate(valueAccessor(), 1000);
   }
};

見る 

<div data-bind="attr: { id: 'ent' + id }, animate: position()" class="entity">
</div>

JSFiddle DEMO

于 2013-10-29T09:31:38.540 に答える