0

現在、Meteor Wordplay の例を使用しています。私が行っているプロジェクトはhttps://github.com/ajcrites/meteor-wordplayにあります

私が追加したかった機能の 1 つは、重複する単語を表示せず、重複した単語を赤で強調表示する (アニメーション化する) ことでした。私はこれを介して機能させました

Meteor.call('score_word', word_id, function (error, result) {
    if (result !== undefined) {
        var bg = $("#word_" + result.id).css('background-color');
        $("#word_" + result.id).css('background-color', 'red');
        //Otherwise transition takes effect *before* BG color is applied
        setTimeout(function () {
            $("#word_" + result.id).css('transition', 'all 2s')
                .css('background-color', bg);
        }, 10);
    }
});

サーバーは、重複した単語 ID がある場合はそれを返します。

これは問題なく動作しますが、単語が追加されるたびに> wordsテンプレート全体が再描画されるように見えるという問題があります。進行中のアニメーションのために HTML が変更されたためだと思いましたが、代わりに CSS を使用してアニメーションを実行してみました。コンソールで確認できる単語を複製しなくても、テンプレート全体が再描画されます。

前に Meteor に関する質問を見つけました。答えは、他の抽象コレクションの代わりにMeteor Collectionを使用してテンプレートから返すことです。

Template.words.words = function () {
    return Words.find({game_id: game() && game()._id,
        player_id: this._id});
};
  1. > wordsテンプレート全体が毎回再描画されないようにするにはどうすればよいですか? テンプレートに新しい単語のみを追加する方法はありますか?
  2. > words#1 への回答に関係なく、重複した単語の赤い BG をアニメーション化して、テンプレートが更新された場合でも完全にアニメーション化する方法はありますか?
4

1 に答える 1

0

私はその難しい質問に答えようとします。間違っていても、私に反対票を投じないでください:

  1. 現代ではできないと思います。たぶん、彼らが構築している次のレンダリング システムで。
  2. はい。しかし、現在のシステムでは簡単ではないと思います。ユーザーがカードを選択したときにカードをローテーションする必要があるゲームがあります。私がやったことは、divを複製することでした。1 つは最後のカードを受け取り、もう 1 つは現在のカードを受け取ります。したがって、jQuery I では .show() または .hide() それらと、アニメーションを行う .addClass() を使用します。クラスには、カードを回転させるトランジションやその他のものがあります。

.

{{#with player_next_card}}
<div id="player-next-card" class="inner-card" style="display: none;">
<!--- stuff here --->
</div>
{{/with}}
{{#with player_last_card}}
<div id="player-last-card" class="inner-card">
<!--- same stuff with other info here --->
</div>
{{/with}}
于 2013-06-07T02:33:12.133 に答える